/* GENERATED by scripts/build/tailwind/build-tailwind.ts — edit frameworks/tailwind/Theme.css or a manifest, not this file. */
@import '../../../Prelude.generated.css';

@layer utilities {
  .arena-progress-bar__root {
    display: grid;
  }
  .arena-progress-bar__head {
    margin-bottom: var(--sp-2);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-items);
  }
  .arena-progress-bar__label {
    font-family: var(--font-body);
    font-size: var(--dz-text-md);
    color: var(--ink-body);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--ink-body) var(--level-ink-body), transparent);
    }
  }
  .arena-progress-bar__value {
    font-family: var(--font-mono);
    font-size: var(--dz-text-sm);
    color: var(--ink-muted);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--ink-muted) var(--level-ink-muted), transparent);
    }
  }
  .arena-progress-bar__track {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-pill);
    background-color: var(--fill-track);
  }
  .arena-progress-bar__announcement {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .arena-progress-bar__fill {
    position: absolute;
    inset: 0px;
    border-radius: inherit;
    background-color: currentcolor;
    transition-property: width;
    transition-timing-function: var(--tw-ease, var(--ease-out));
    transition-duration: var(--tw-duration, var(--dur-fast));
    --tw-duration: var(--dur-state);
    transition-duration: var(--dur-state);
    --tw-ease: var(--ease-state);
    transition-timing-function: var(--ease-state);
  }
  .arena-progress-bar__indeterminate::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    border-radius: inherit;
    background: currentColor;
    animation: arena-prog var(--loop-sweep) var(--ease-in-out) infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .arena-progress-bar__indeterminate::after {
          animation-duration: var(--loop-reduced);
        }
  }
  .arena-progress-bar__ring {
    position: relative;
    display: grid;
    flex-shrink: 0;
    place-items: center;
  }
  .arena-progress-bar__ring-content {
    position: relative;
    display: grid;
    place-items: center;
    grid-area: 1/1;
  }
  .arena-progress-bar__ring-geometry {
    position: absolute;
    inset: 0px;
    width: 100%;
    height: 100%;
    rotate: calc(90deg * -1);
  }
  .arena-progress-bar__ring-track {
    fill: none;
    stroke: var(--color-base-300);
    vector-effect: non-scaling-stroke;
  }
  .arena-progress-bar__ring-fill {
    fill: none;
    stroke: currentcolor;
    transition-property: stroke-dashoffset;
    transition-timing-function: var(--tw-ease, var(--ease-out));
    transition-duration: var(--tw-duration, var(--dur-fast));
    --tw-duration: var(--dur-state);
    transition-duration: var(--dur-state);
    --tw-ease: var(--ease-state);
    transition-timing-function: var(--ease-state);
    stroke-dasharray: 100;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }
  .arena-progress-bar__ring-indeterminate {
    transform-origin: 50% 50%;
    animation: arena-prog-ring var(--loop-spin) linear infinite;
    @media (prefers-reduced-motion: reduce) {
      animation-duration: var(--loop-reduced);
    }
  }
  .arena-progress-bar__root--shape-linear {
    width: 100%;
  }
  .arena-progress-bar__root--shape-radial {
    width: fit-content;
    justify-items: center;
    gap: var(--gap-items);
  }
  .arena-progress-bar__label--shape-radial {
    text-align: center;
  }
  .arena-progress-bar__value--shape-radial {
    font-family: var(--font-mono);
    font-size: var(--dz-text-md);
    color: var(--ink-body);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--ink-body) var(--level-ink-body), transparent);
    }
    grid-area: 1/1;
  }
  .arena-progress-bar__track--tone-accent {
    color: var(--color-primary);
  }
  .arena-progress-bar__ring--tone-accent {
    color: var(--color-primary);
  }
  .arena-progress-bar__track--tone-gold {
    color: var(--color-secondary);
  }
  .arena-progress-bar__ring--tone-gold {
    color: var(--color-secondary);
  }
  .arena-progress-bar__track--tone-success {
    color: var(--color-success);
  }
  .arena-progress-bar__ring--tone-success {
    color: var(--color-success);
  }
  .arena-progress-bar__track--tone-danger {
    color: var(--color-error);
  }
  .arena-progress-bar__ring--tone-danger {
    color: var(--color-error);
  }
  .arena-progress-bar__track--tone-info {
    color: var(--color-info);
  }
  .arena-progress-bar__ring--tone-info {
    color: var(--color-info);
  }
  .arena-progress-bar__track--size-sm {
    height: var(--sp-1);
  }
  .arena-progress-bar__ring--size-sm {
    width: var(--sp-12);
    height: var(--sp-12);
  }
  .arena-progress-bar__ring-track--size-sm {
    stroke-width: var(--sp-1);
  }
  .arena-progress-bar__ring-fill--size-sm {
    stroke-width: var(--sp-1);
  }
  .arena-progress-bar__track--size-md {
    height: calc(var(--sp-1) * 1.5);
  }
  .arena-progress-bar__ring--size-md {
    width: var(--sp-16);
    height: var(--sp-16);
  }
  .arena-progress-bar__ring-track--size-md {
    stroke-width: calc(var(--sp-1) * 1.5);
  }
  .arena-progress-bar__ring-fill--size-md {
    stroke-width: calc(var(--sp-1) * 1.5);
  }
  .arena-progress-bar__track--size-lg {
    height: calc(var(--sp-1) * 2.5);
  }
  .arena-progress-bar__ring--size-lg {
    width: var(--sp-24);
    height: var(--sp-24);
  }
  .arena-progress-bar__ring-track--size-lg {
    stroke-width: calc(var(--sp-1) * 2.5);
  }
  .arena-progress-bar__ring-fill--size-lg {
    stroke-width: calc(var(--sp-1) * 2.5);
  }
}