/* ==========================================================================
   Meter - A quantity indicator within a known range
   ========================================================================== */

/* Base styles */
.meter {
  @apply grid w-full gap-1;
  grid-template-areas:
    "label output"
    "track track";
  grid-template-columns: 1fr auto;

  /* Default color tokens (accent) */
  --meter-fill: var(--color-accent);

  [data-slot="label"] {
    @apply w-fit text-sm font-medium;

    grid-area: label;
  }

  .meter__output {
    @apply text-sm font-medium tabular-nums;

    grid-area: output;
  }

  .meter__track {
    @apply relative overflow-hidden rounded-full bg-default;

    grid-area: track;

    /* Default height (matches --md) */
    @apply h-2;
  }

  .meter__fill {
    @apply absolute top-0 left-0 h-full rounded-full;

    background-color: var(--meter-fill);

    /**
     * Transitions
     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
     */
    transition: width 300ms var(--ease-out);
    @apply motion-reduce:transition-none;
  }

  /* Disabled state */
  &:disabled,
  &[data-disabled="true"],
  &[aria-disabled="true"] {
    @apply status-disabled;

    [data-slot="label"] {
      @apply opacity-100;
    }
  }
}

/* ==========================================================================
   Size variants
   ========================================================================== */

.meter--sm {
  .meter__track {
    @apply h-1;
  }
}

.meter--md {
  /* No styles as this is the default size */
}

.meter--lg {
  .meter__track {
    @apply h-3;
  }
}

/* ==========================================================================
   Color variants
   ========================================================================== */

.meter--default {
  --meter-fill: var(--color-default-foreground);
}

.meter--accent {
  --meter-fill: var(--color-accent);
}

.meter--success {
  --meter-fill: var(--color-success);
}

.meter--warning {
  --meter-fill: var(--color-warning);
}

.meter--danger {
  --meter-fill: var(--color-danger);
}