@import "config/_base_set_08_config";

#tvu_set_08 {
  font-family: $font-family;
  h5 {
    color: $heading-color;
    font-weight: $heading-font-weight;
    font-size: $heading-font-size;
    font-family: $font-family2;
    line-height: $heading-line-height;
    letter-spacing: normal;
    margin-bottom: 0;
  }
  p {
    color: $paragraph-color;
    font-size: $paragraph-font-size;
    font-weight: $paragraph-font-weight;
    font-family: $font-family;
    line-height: $paragraph-line-height;
    margin-bottom: $paragraph-margin-bottom;
    &.bold_text {
      font-weight: $paragraph-bold-weight;
    }
    .bold_text {
      color: #ffcc00;
      font-weight: $paragraph-bold-weight;
    }
  }
  .tve-ult-bar-close {
    background: $close-btn-bg;
    color: $close-btn-color;
    @if $close-btn-no-border {
      border: 0;
    }
    font-size: $close-btn-font-size;
    height: $close-btn-size;
    line-height: $close-btn-line-height;
    top: 20%;
    width: $close-btn-size;
  }
  //button
  .thrv_button_shortcode {
    margin-top: 0;
    margin-bottom: 0;
    .tve_btn3.tve_btn {
      @if ($transparent-bg) {
        background: none;
      }
      border-radius: $button-border-radius;
      box-shadow: $button-box-shadow;
      font-family: $font-family;
      .tve_btnLink {
        @if $same-colors-for-btns {
          color: $button-default-color;
        }
        text-shadow: $button-text-shadow;
        > span {
          color: inherit;
        }
      }
      @if $different-btn-white {
        &.tve_white {
          .tve_btnLink {
            color: $button-white-color;
          }
        }
      }
      @if $different-btn-orange {
        &.tve_orange {
          .tve_btnLink {
            color: $button-orange-color;
          }
        }
      }
      &:hover {
        .tve_btnLink {
          color: $button-color-hover;
        }
      }
      @if $same-active-bg {
        &:active:hover, &:active {
          border: 2px solid $button-active-border;
          background: $button-active-bg;
        }
      }
      @if $different-btn-white-h {
        &.tve_white {
          &:hover {
            .tve_btnLink {
              color: $button-white-color-h;
            }
          }
        }
      }
      @if $different-btn-orange-h {
        &.tve_orange {
          &:hover {
            .tve_btnLink {
              color: $button-orange-color-h;
            }
          }
        }
      }
      @if $different-btn-white-a {
        &.tve_white {
          &:active {
            .tve_btnLink {
              color: $button-white-color-a;
            }
          }
        }
      }
      @if $different-btn-orange-a {
        &.tve_orange {
          &:active {
            .tve_btnLink {
              color: $button-orange-color-a;
            }
          }
        }
      }
      &.tve_normalBtn {
        font-size: $button-font-size;
        font-weight: $button-font-weight;
        line-height: $button-line-height !important;
        .tve_btnLink {
          padding: $button-padding;
        }
      }
    }
  }
  //countdown
  .thrv_countdown_timer.tve_countdown_2 {
    margin-top: 0;
    margin-bottom: 0;
    .tve_t_part {
      border-radius: $countdown-item-border-radius;
      @if $countdown-no-border {
        border: 0;
      }
      @if $countdown-same-color-items {
        background: $countdown-item-bg;
      }
      @if $countdown-no-background {
        background: none;
      }
      padding: 0;
      .t-digits {
        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;
          width: $item-min-width*0.5;
        }
        .part-2 {
          right: $item2-spacing;
        }
        .part-3 {
          right: $item3-spacing;
        }
        .part-4 {
          right: $item4-spacing;
        }
      }
      .t-caption {
        color: $caption-color;
        font-weight: $caption-font-weight;
        font-size: $caption-font-size;
        min-width: $item-min-width;
        margin: 0 10px;
        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_08 {
    .thrv_button_shortcode {
      .tve_btn3.tve_#{nth($color, 1)} {
        background-image: linear-gradient(nth($color, 2), nth($color, 3));
        &:hover {
          background-image: linear-gradient(nth($color, 4), nth($color, 5));
        }
        &:active {
          background: nth($color, 6);
        }
      }
    }
    .thrv_countdown_timer.tve_countdown_2.tve_#{nth($color, 1)} {
      .tve_t_part {
        border: 3px solid nth($color, 2);
        [class*="part-"] {
          color: nth($color, 2);
        }
        .t-caption {
          color: nth($color, 2);
        }
      }
    }
  }
}

.set-06-arrow {

}

//SUPP-2928

@media only screen and (max-width: 1024px) {
  #tvu_set_08 {
    .thrv_countdown_timer.tve_countdown_2 {
      .tve_t_part {
        .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 {
          display: none;
          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;
          }
        }
      }
    }
    .tvu-heading {
      margin-top: 10px !important;;
    }
    .tve_btn3 {
      margin-top: 0 !important;
    }
  }
}

@media only screen and (max-width: 940px) {
  #tvu_set_08 {
    .thrv_countdown_timer.tve_countdown_2 {
      margin: 10px auto;
      .tve_t_part {
        margin-right: 4px;
      }
    }
  }
  .tvu-heading {
    margin-top: 0 !important;
    text-align: center !important;
  }
  .thrv_button_shortcode {
    .tve_btn3.tve_btn {
      &.tve_normalBtn {
        .tve_btnLink {
          padding: $button-padding-r;
        }
      }
    }
  }
}

$set-color: #fff;
$set-hover-text-color: #fff;
$set-hover-bg-color: linear-gradient(#f67696, #ee4051);
.tvu_set_08 {
  .thrv-button:hover .tcb-button-link {
    background: $set-hover-bg-color;
  }
  .thrv-button.tve-state-hover .tcb-button-link {
    background: $set-hover-bg-color !important;
  }
  .thrv-button:hover .tcb-button-link span, .thrv-button.tve-state-hover .tcb-button-link span {
    color: $set-hover-text-color;
  }
  .thrv-button .tcb-button-link span {
    color: $set-color;
    font-weight: 600;
  }
  .thrv-button {
    min-width: 20px;
    margin: 5px auto 0;
  }
  .tcb-button-link {
    border-radius: 50px;
    background: linear-gradient(#f46883, #f04e63);
    padding: 15px 50px;
    font-size: 24px;
    line-height: 1.5em;
    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.22) inset;
  }
}
