@import "config/_base_set_22_config";

#tvu_set_22 {
  font-family: $font-family;
  //countdown
  .thrv_countdown_timer.tve_countdown_3 {
    margin-top: 0;
    margin-bottom: 0;
    .sc_timer_content {
      position: relative;
      &:before {
        background-image: url('../images/set_22_shadow.png');
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center top;
        content: '';
        display: block;
        height: 19px;
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: -10px;
        z-index: -1;
      }
    }
    .tve_t_part {
      @if $countdown-no-border {
        border: 0;
      }
      @if $countdown-no-background {
        background: none;
      }
      margin-right: 20px;
      padding: 0;
      &.tve_t_sec {
        margin-right: 0;
      }
      &:first-child {
        &:before {
          display: none;
        }
      }
      &:before {
        background: #fff;
        content: '';
        display: block;
        position: absolute;
        top: 14px;
        bottom: 14px;
        left: -10px;
        transform: rotate(-25deg);
        width: 1px;
      }
      .t-digits {
        @if $countdown-same-color-items {
          background: $countdown-item-bg;
        }
        border-radius: $countdown-item-border-radius;
        height: $item-height;
        min-width: $item-min-width;
        padding: 0 $item-padding;
        [class*="part-"] {
          color: $item-color;
          font-size: $item-font-size;
          font-weight: $item-font-weight;
          font-style: $item-font-style;
          line-height: $item-line-height;
          right: $item-spacing;
          min-width: $item-min-width*0.5;
          z-index: 1;
          width: $item-min-width*0.5;
        }
        .part-2 {
          right: $item2-spacing;
        }
        .part-3 {
          right: $item3-spacing;
        }
        .part-4 {
          right: $item4-spacing;
        }
        &:after {
          display: none;
        }
      }
      .t-caption {
        color: $caption-color;
        border-top: 0;
        font-weight: $caption-font-weight;
        font-size: $caption-font-size;
        min-width: $item-min-width;
        margin: 10px 10px -45px;
        padding: 2px 0 14px 0;
        &:before {
          display: none;
        }
      }
    }
    &.tve_white {
      .tve_t_part {
        [class*="part-"] {
          color: $item-color-dark;
        }
        .t-caption {
          color: $caption-color-dark;
        }
        &:before {
          background: $item-color-dark;
        }
      }
    }
    &[data-dd="2"] {
      .tve_t_day {
        .t-digits {
          min-width: $item-min-width;
        }
      }
    }
    &[data-dd="3"] {
      .tve_t_day {
        .t-digits {
          min-width: $item-min-width * 1.5;
        }
      }
    }
    &[data-dd="4"] {
      .tve_t_day {
        .t-digits {
          min-width: $item-min-width * 2;
        }
      }
    }
  }
}

//color pallete

@each $color in $color-pallete {
  #tvu_set_22 {
    .thrv_countdown_timer.tve_countdown_3.tve_#{nth($color, 1)} {
      .sc_timer_content {
        background: nth($color, 2);
      }
    }
  }
}

@media only screen and (max-width: 1080px) {
  #tvu_set_22 {
    .thrv_countdown_timer.tve_countdown_3 {
      .tve_t_part {
        &:before {
          top: 5px;
          bottom: 5px;
          left: -5px;
        }
        .t-digits {
          height: $item-height-r;
          min-width: $item-min-width-r;
          padding: 0 $item-padding-r;
          [class*="part-"] {
            font-size: $item-font-size-r;
            line-height: $item-line-height-r;
            right: $item-spacing-r;
            min-width: $item-min-width-r*0.5;
            width: $item-min-width-r*0.5;
          }
          .part-2 {
            right: $item2-spacing-r;
          }
          .part-3 {
            right: $item3-spacing-r;
          }
          .part-4 {
            right: $item4-spacing-r;
          }
        }
        .t-caption {
          font-size: 8px;
          color: #fff;
          margin: 0 5px;
          padding: 0 0 5px;
        }
      }
      &[data-dd="2"] {
        .tve_t_day {
          .t-digits {
            min-width: $item-min-width-r;
          }
        }
      }
      &[data-dd="3"] {
        .tve_t_day {
          .t-digits {
            min-width: $item-min-width-r * 1.5;
          }
        }
      }
      &[data-dd="4"] {
        .tve_t_day {
          .t-digits {
            min-width: $item-min-width-r * 2;
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 940px) {
  #tvu_set_22 {
    .thrv_countdown_timer.tve_countdown_3 {
      margin: 10px auto;
      .tve_t_part {
        margin-right: 4px;
      }
    }
  }
}