@import '../styles/theme.scss';

.meter {
  display: inline-block;

  &__item {
    display: inline-flex;
    align-items: center;
  }

  &__int-box,
  &__dec-box {
    display: inline-block;
    text-align: center;
    font: {
      family: 'CountDown';
      style: normal;
      variant: normal;
    }
    border: {
      width: 1px;
      style: solid;
    }

    text-transform: none;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
    position: relative;
    box-shadow: $shadows1;

    .meter__value {
      position: relative;
      z-index: $zIndexDivider + 1;
    }

    &::after {
      position: absolute;
      content: '';
      width: 100%;
      height: 1px;
      top: 50%;
      left: 0;
      margin-top: -0.5px;
      z-index: $zIndexDivider;
    }
  }

  &__int-box {
    border-color: $paletteCommonBlack;
    color: $paletteCommonWhite;
    background-color: $paletteCommonBlack;
    font-weight: 500;
    &::after {
      background-color: $paletteGrey800;
    }
  }
  &__dec-box {
    border-color: $paletteErrorDark;
    color: $paletteErrorContrastText;
    background-color: $paletteErrorDark;
    font-weight: 400;
    &::after {
      background-color: $paletteErrorMain;
    }
  }

  &__separator {
    display: inline-flex;
    align-items: center;
    text-align: justify;
    font-weight: 500;
  }

  &--large {
    &.meter {
      min-height: 48px;
    }
    .meter {
      &__int-box,
      &__dec-box {
        border-radius: 24px;
        min-width: 48px;
        padding: #{$spacingUnit + 2}px 0 #{$spacingUnit}px 0;
        margin: 0 #{$spacingUnit/2}px;
        line-height: 1;
        font: {
          size: 48px;
        }
      }
      &__separator {
        font-size: 48px;
        display: inline-flex;
        align-items: center;
        text-align: justify;
        padding: 0 #{$spacingUnit}px;
      }
    }
  }
  &--normal,
  &--medium {
    &.meter {
      min-height: 32px;
    }
    .meter {
      &__int-box,
      &__dec-box {
        border-radius: 16px;
        min-width: 32px;
        padding: #{$spacingUnit/2 + 2}px 0 #{$spacingUnit/2}px 0;
        margin: 0 #{$spacingUnit/4}px;
        line-height: 1;
        font: {
          size: 32px;
        }
      }
      &__separator {
        font-size: 32px;
        display: inline-flex;
        align-items: center;
        text-align: justify;
        padding: 0 #{$spacingUnit/4}px;
      }
    }
  }
  &--small {
    &.meter {
      min-height: 20px;
    }
    .meter {
      &__int-box,
      &__dec-box {
        border-radius: 10px;
        min-width: 20px;
        padding: #{$spacingUnit/2 + 2}px 0 #{$spacingUnit/2}px 0;
        margin: 0 #{$spacingUnit/4}px;
        line-height: 1;
        font: {
          size: 20px;
        }
      }
      &__separator {
        font-size: 20px;
        display: inline-flex;
        align-items: center;
        text-align: justify;
        padding: 0;
      }
    }
  }
  &--xs {
    &.meter {
      min-height: 12px;
    }
    .meter {
      &__int-box,
      &__dec-box {
        border-radius: 6px;
        min-width: 12px;
        padding: #{$spacingUnit/4 + 2}px 0 #{$spacingUnit/4}px 0;
        margin: 0 #{$spacingUnit/8}px;
        line-height: 1;
        font: {
          size: 12px;
        }
      }
      &__separator {
        font-size: 12px;
        display: inline-flex;
        align-items: center;
        text-align: justify;
        padding: 0;
      }
    }
  }
}