@import "config/_base_set_21_config";

#tvu_set_21 {
  font-family: $font-family;
  //countdown
  .thrv_countdown_timer.tve_countdown_3 {
    margin-top: 0;
    margin-bottom: 0;
    .tve_t_part {
      @if $countdown-no-border {
        border: 0;
      }
      @if $countdown-no-background {
        background: none;
      }
      margin-right: 20px;
      padding: 0;
      &:after {
        background: url('../images/set_21_shadow.png');
        content: '';
        display: block;
        height: 84px;
        position: absolute;
        left: -12px;
        top: 0;
        width: 112px;
        z-index: -1;
      }
      .t-digits {
        @if $countdown-same-color-items {
          background: $countdown-item-bg;
        }
        border-radius: $countdown-item-border-radius;
        box-shadow: 0 -1px 0 0 rgba(#000, .1) inset;
        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 0;
        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;
        }
      }
    }
    &[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_21 {
    .thrv_countdown_timer.tve_countdown_3.tve_#{nth($color, 1)} {
      .t-digits {
        background: nth($color, 2);
      }
    }
  }
}

@media only screen and (max-width: 1080px) {
  #tvu_set_21 {
    .thrv_countdown_timer.tve_countdown_3 {
      .tve_t_part {
        margin-right: 5px;
        &:after {
          display: none;
        }
        .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: 10px;
          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_21 {
    .thrv_countdown_timer.tve_countdown_3 {
      margin: 10px auto;
      .tve_t_part {
        margin-right: 4px;
      }
    }
  }
}