site/src/styles/ak-progress.css
/**
 * Copyright 2025-present Ariakit FZ-LLC. All Rights Reserved.
 *
 * This software is proprietary. See the license.md file in the root of this
 * package for licensing terms.
 *
 * SPDX-License-Identifier: UNLICENSED
 */

@property --ak-progress-value {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@utility ak-progress-value-* {
  --ak-progress-value: calc(--value(number) / 100);
  --ak-progress-value: calc(--value(ratio));
  --ak-progress-value: --value(percentage, [*]);
}

@utility ak-progress-thickness-* {
  --ak-progress-thickness: --spacing(--value(number));
  --ak-progress-thickness: --value([*]);
}

@utility ak-progress {
  @apply ak-layer-pop-2 ak-edge/0 ak-frame-force-full ak-progress-thickness-2;
  @apply h-(--ak-progress-thickness) relative block w-full overflow-clip ring ring-inset;
  --ak-progress-ring: var(--ak-ring);

  &::-webkit-progress-bar {
    @apply ak-frame ak-layer-current;
    @apply ring-(--ak-progress-ring) ring ring-inset;
  }
  &::-webkit-progress-value {
    @apply ak-progress-fill_base;
  }
}

@utility ak-progress-fill_base {
  @apply ak-layer-contrast-primary ak-frame;
  @apply starting:w-0! block h-full transition-[width] duration-1000;
  @variant motion-reduce {
    @apply duration-0;
  }
}

@utility ak-progress-fill {
  @apply ak-progress-fill_base;
  width: calc(var(--ak-progress-value) * 100%);
}

@utility ak-progress-circular {
  @apply ak-layer-pop-2 ak-edge/0 ak-frame-force-full ak-progress-thickness-2;
  @apply relative size-full ring ring-inset;
  --ak-progress-layer-parent: var(--ak-layer-parent);
  --ak-progress-ring: var(--ak-ring);
  &::after {
    @apply ak-layer-(--ak-progress-layer-parent);
    @apply ring-(--ak-progress-ring) inset-(--ak-progress-thickness) absolute rounded-full ring;
    content: "";
  }
}

@utility ak-progress-circular-fill {
  @apply ak-layer-contrast-primary;
  @apply absolute inset-0 rounded-full bg-transparent transition-[--ak-progress-value] duration-1000;
  --feather-px: 0.5px;
  --feather-deg: 1deg;
  @starting-style {
    --ak-progress-value: 0 !important;
  }
  background-image: conic-gradient(
    from 0deg,
    var(--ak-layer) 0turn,
    var(--ak-layer) calc(var(--ak-progress-value) * 1turn - var(--feather-deg)),
    transparent calc(var(--ak-progress-value) * 1turn + var(--feather-deg)),
    transparent 1turn
  );
  mask-image: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--ak-progress-thickness) - var(--feather-px)),
    #000 calc(100% - var(--ak-progress-thickness) + var(--feather-px))
  );
  @variant motion-reduce {
    @apply duration-0;
  }
}
