@import '../style/mixins/index.scss';
@import '../style/variables/default.scss';
@import '../styles/theme.scss';

$font-size: $font-size-lg;

.rm-count-down {
  display: inline-block;

  &.block {
    display: block;
  }

  &-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  }

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

  &__time-box {
    display: inline-block;
    text-align: center;
    font: {
      family: 'CountDown';
      style: normal;
      weight: 400;
      variant: normal;
    }

    text-transform: none;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
  }

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

  &--card {
    .rm-count-down__time-box {
      border: 1px solid $color-border-grey;
      border-radius: $border-radius-md;
      display: inline-block;
      position: relative;

      color: $paletteErrorDark;
      background-color: $paletteErrorContrastText;

      .rm-count-down__time {
        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;
        background-color: $paletteGrey400;
      }
    }
  }

  &--dark {
    .rm-count-down__time-box {
      color: $paletteCommonWhite;
      background-color: $paletteCommonBlack;

      &::after {
        background-color: $paletteGrey500;
      }
    }
  }

  &--large {
    min-height: 32px;

    .rm-count-down__time-box {
      min-width: 32px;
      padding: #{$spacing-v-xs + 4} 0 $spacing-v-xs 0;
      line-height: 1;
      font: {
        size: 32px;
      }
    }
    .rm-count-down__separator {
      font-size: 32px;
      padding: 0 $spacing-v-xs;
    }
  }
  &--normal,
  &--medium {
    min-height: 24px;

    .rm-count-down__time-box {
      min-width: 24px;
      padding: #{$spacing-v-xs + 4} 0 $spacing-v-xs 0;
      line-height: 1;
      font: {
        size: 24px;
      }
    }
    .rm-count-down__separator {
      font-size: 24px;
      padding: 0 $spacing-v-xs;
    }
  }
  &--small {
    min-height: 18px;

    .rm-count-down__time-box {
      border-radius: $border-radius-sm;
      min-width: 18px;
      padding: #{$spacing-v-xs/2 + 2} 0 #{$spacing-v-xs/2} 0;
      line-height: 1;
      font: {
        size: 18px;
      }
    }
    .rm-count-down__separator {
      font-size: 18px;
      padding: 0 $spacing-v-xs;
    }
  }
  &--xs {
    min-height: 12px;

    .rm-count-down__time-box {
      border-radius: $border-radius-sm;
      min-width: 12px;
      padding: #{$spacing-v-xs/2 + 2} 0 #{$spacing-v-xs/2} 0;
      line-height: 1;
      font: {
        size: 12px;
      }
    }
    .rm-count-down__separator {
      font-size: 16px;
      padding: 0 #{$spacing-v-xs/2};
    }
  }
}