@import "mixins/mixins";
@import "common/var";

@mixin countdown-size($padding-vertical, $width, $border-radius, $font-color, $bg-color) {
  width: $width;
  padding: $padding-vertical 0;
  border-radius: $border-radius;
  text-align: center;
  line-height: 1;
  color: $font-color;
  background: $bg-color;
}

@include b(countdown) {
  display: inline-flex;

  @include e(item) {
    display: inline-flex;
    align-items: center;
  }
  
  @include e(prefix) {
    margin-right: 2px;
    line-height: 1;
    color: $--countdown-prefix-font-color;
  }
  
  @include e(content) {
    display: inline-flex;
  }

  @include m(large) {
    font-size: $--countdown-num-large-font-size;

    @include e(prefix) {
      padding: $--countdown-num-medium-padding-vertical 0;
    }

    @include b(countdown-num) {

      @include countdown-size($--countdown-num-medium-padding-vertical, $--countdown-num-large-width, $--countdown-num-large-border-radius, $--countdown-font-color, $--countdown-num-large-bg-color);
      
      font-weight: bold;
    }

    @include b(countdown-tpl) {
      margin: 0 10px;
      font-size: $--countdown-num-large-font-size;
      font-weight: bold;
      color: $--countdown-font-color;
    }

  }
  
  @include m(medium) {
    font-size: $--countdown-num-medium-font-size;

    @include b(countdown-num) {

      @include countdown-size($--countdown-num-medium-padding-vertical, $--countdown-num-medium-width, $--countdown-num-medium-border-radius, $--countdown-font-color, $--countdown-num-medium-bg-color);
      
      font-weight: bold;
    }

    @include b(countdown-tpl) {
      margin: 0 5px;
      font-size: $--countdown-num-medium-font-size;
      font-weight: bold;
      color: $--countdown-font-color;
    }

    & .hn-countdown__prefix {
      padding: $--countdown-num-medium-padding-vertical - 1px 0;
    }
  }

  @include m(small) {
    font-size: $--countdown-num-small-font-size;
    
    @include b(countdown-num) {
      color: $--countdown-font-color;
    }

    @include b(countdown-tpl) {
      margin: 0 2px;
      font-size: $--countdown-num-small-font-size;
      color: $--countdown-font-color;
    }
  }


  @include m(calendar) {
    @include b(countdown-num) {
      background: #fff;
      box-shadow:0px 2px 6px rgba(0,0,0,0.1);
    }

    &.hn-countdown--large {
      @include b(countdown-num) {
        padding: 23px 0;
      }
      @include b(countdown-tpl) {
        margin: 0 10px;
        font-size: $--countdown-calendar-tpl-large-font-size;
      }
    }

    &.hn-countdown--medium {
      @include b(countdown-num) {
        padding: 8px 0;
      }
      @include b(countdown-tpl) {
        margin: 0 5px;
        font-size: $--countdown-calendar-tpl-medium-font-size;
      }
    }
  }
}