@import "./theme.css";
@import "./utilities.css";

.react-aria-Meter {
  display: grid;
  grid-template-areas: "label value"
                       "bar bar";
  grid-template-columns: 1fr auto;
  width: 250px;
  color: var(--text-color);
  font: var(--font-size) system-ui;

  .value {
    grid-area: value;
  }

  .track {
    grid-area: bar;
    forced-color-adjust: none;
    height: calc(var(--spacing-2) + 2px);
    border-radius: 9999px;
    overflow: hidden;
  }

  .fill {
    --fill-color: var(--green);
    background: oklch(from var(--fill-color) var(--lightness-700) c h);
    height: calc(100% - 2px);
    margin: 1px 0 0 1px;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 1px 0 lch(from var(--fill-color) 42% c h), 0 0 0 1px var(--fill-color);

    @media (forced-colors: active) {
      box-shadow: none;
      background: Highlight;
    }
  }
}
