@import '../variables/default.scss';
@import '../mixins/index.scss';

.at-countdown {
  display: inline-block;
  min-height: $at-countdown-font-size;

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

  &__time-box {
    display: inline-block;
    text-align: center;
    min-width: $at-countdown-font-size;

    font: {
      size: $at-countdown-font-size;
      family: CountDown;
      style: normal;
      weight: 400;
      variant: normal;
    }

    color: $at-countdown-num-color;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
  }

  &__separator {
    display: inline-flex;
    padding: 0 $spacing-v-xs;
    font-size: $font-size-base;
    text-align: justify;
    align-items: center;
  }

  /* modifiers */
  &--card {
    .at-countdown__time-box {
      display: inline-block;
      position: relative;
      padding: $spacing-v-xs 0;
      color: $at-countdown-card-num-color;
      border: 1px solid $color-border-grey;
      border-radius: $border-radius-md;
      background-color: $at-countdown-card-num-bg-color;

      .at-countdown__time {
        position: relative;
        z-index: $zindex-divider + 1;
      }

      &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: $color-grey-3;
        z-index: $zindex-divider;
      }
    }
  }
}