@layer ui-reset, ui;

/* progress */
@layer ui {
  @keyframes ui-progress-indeterminate {
    from {
      background-position: 100%;
    }

    to {
      background-position: -100%;
    }
  }

  progress {
    appearance: none;
    width: 100%;
    height: var(--ui-spacing-2);
    border-radius: var(--ui-rounded-full);
    border: none;
    overflow: hidden;

    &::-webkit-progress-bar {
      background: var(--border-color, var(--ui-neutral-200));
    }

    &::-webkit-progress-value {
      background: var(--ui-primary);
      border-radius: var(--ui-rounded-full);
    }

    &::-moz-progress-bar {
      background: var(--ui-primary);
      border-radius: var(--ui-rounded-full);
    }

    &:indeterminate {
      background: linear-gradient(90deg,
      var(--ui-neutral-200) 0%,
      var(--ui-neutral-200) 40%,
      var(--ui-primary) 40%,
      var(--ui-primary) 60%,
      var(--ui-neutral-200) 60%);
      background-size: 200% 100%;
      animation: 1.5s linear infinite ui-progress-indeterminate;

      &::-webkit-progress-bar {
        background: none;
      }

      &::-webkit-progress-value {
        background: none;
      }

      &::-moz-progress-bar {
        background: none;
      }
    }
  }

  @property --ui-progress-fill {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
  }

  @keyframes ui-progress-spin {
    to {
      rotate: 1turn;
    }
  }

  progress.round {
    --thickness: var(--ui-spacing-1);
    --ui-progress-fill: var(--value, 0);
    aspect-ratio: 1;
    --cap: calc(var(--thickness) / 2 * min(1, var(--ui-progress-fill) * 100));
    --angle: calc(var(--ui-progress-fill) * 1turn);
    --center: calc(50% - var(--thickness) / 2);
    background: radial-gradient(circle var(--cap) at 50% calc(var(--thickness) / 2),
      var(--ui-primary) calc(100% - .5px),
      transparent),
    radial-gradient(circle var(--cap) at calc(50% + sin(var(--angle)) * var(--center))
        calc(50% - cos(var(--angle)) * var(--center)),
      var(--ui-primary) calc(100% - .5px),
      transparent),
    conic-gradient(var(--ui-primary) var(--angle),
      var(--border-color, var(--ui-neutral-200)) 0);
    width: 2em;
    height: auto;
    mask: radial-gradient(farthest-side,
    transparent calc(100% - var(--thickness) - .5px),
    black calc(100% - var(--thickness)));
    transition: --ui-progress-fill var(--ease-glide-5);
    flex-shrink: 0;

    @supports (width: attr(x type(<length>))) {
      --ui-progress-fill: min(attr(value type(<number>), 0) / attr(max type(<number>), 1),
      1);
    }

    &::-webkit-progress-bar {
      background: none;
    }

    &::-webkit-progress-value {
      background: none;
    }

    &::-moz-progress-bar {
      background: none;
    }

    &:indeterminate {
      --ui-progress-fill: .25;
      animation: 1s linear infinite ui-progress-spin;
    }
  }
}