@use "../../../styles/tokens/space";
@use "../../../styles/tokens/color";
@use "../../../styles/tools/convert";

@layer components {
  .gauge {
    position: relative;
    width: convert.to-rem(220px);
    padding: 0;
    margin: 0 0 space.get("large") 0;
    text-align: center;

    &__dial {
      display: block;
      margin: 0 auto;
    }

    &__text {
      position: absolute;
      max-width: convert.to-rem(160px);
      bottom: space.get("xsmall");
      left: 50%;
      transform: translateX(-50%);
    }

    &__display {
      stroke: var(--color-surface-subtle);
    }

    &__indicator {
      stroke: var(--color-border-contrast);
    }
  }
}