@layer ui-reset, ui;

/* meter */
@layer ui {
  meter {
    --meter-good: var(--ui-constructive);
    --meter-average: color-mix(in oklch, var(--ui-constructive), var(--ui-destructive));
    --meter-bad: var(--ui-destructive);
    appearance: none;
    width: 100%;
    height: var(--ui-spacing-2);
    border-radius: var(--ui-rounded-full);
    background: var(--border-color, var(--ui-neutral-200));
    border: none;
    display: block;
    overflow: hidden;

    &::-webkit-meter-inner-element {
      display: grid;
    }

    &::-webkit-meter-bar {
      border-radius: inherit;
      background: none;
      border: none;
      grid-area: 1 / 1;
      height: 100%;
    }

    &::-webkit-meter-optimum-value {
      border-radius: var(--ui-rounded-full);
      height: 100%;
    }

    &::-webkit-meter-suboptimum-value {
      border-radius: var(--ui-rounded-full);
      height: 100%;
    }

    &::-webkit-meter-even-less-good-value {
      border-radius: var(--ui-rounded-full);
      height: 100%;
    }

    &::-webkit-meter-optimum-value {
      background: var(--meter-good);
    }

    &::-webkit-meter-suboptimum-value {
      background: var(--meter-average);
    }

    &::-webkit-meter-even-less-good-value {
      background: var(--meter-bad);
    }

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

    &:-moz-meter-sub-optimum::-moz-meter-bar {
      background: var(--meter-average);
    }

    &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
      background: var(--meter-bad);
    }
  }
}