@import '~@od/global-resources/scss/settings/index';

.product-slider {
  position: relative;
  clear: both;
  @include margin(0 0 10px 0);
  @include clearfix();

  //for bzzer-voice
  &-star-rating {
    height: 30px;
  }

  &-heading {
    display: block;
    border-bottom: 1px solid $gray-medium;
    @include padding(6px 0);
    @include margin(6px 0 15px 0);
    @include font-size($base-font-size + 6);
  }

  .product {
    @include font-size($base-font-size - 2);

    &:hover .product-atc {
      display: block;
    }

    &-image-link {
      text-align: center;
      display: block;
      width: 100%;
      height: 150px;
      padding: 0 0 15px 0;
      margin-top: 6px;

      img {
        width: 100%;
        height: 100%;
        max-width: 150px;
      }
    }

    &-wrapper {
      position: relative;
      border-radius: 3px;
      padding: 20px 20px 52px 20px;
      background: $white;
      border: 1px solid $gray-medium;

      &.no-padding-bottom {
        padding-bottom: 20px;
      }
    }

    &-atc {
      display: none;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;

      .btn.med-txt {
        border-top-right-radius: 0;
        border-top-left-radius: 0;
      }
    }

    &-description-name {
      height: 60px;
    }

    &-description a {
      color: $black;
      font-weight: $font-weight-normal;
      display: block;
      width: 100%;
      @include multiLineEllipsis($lineHeight: 1.2em, $lineCount: 3, $bgColor: $white);
    }

    .star-rating {
      @include font-size($base-font-size - 4);
    }

    .price-block {
      @include margin(10px 0 0 0);
    }

    &-seedsku-heading {
      position: absolute;
      top: 3px;
      left: 50%;
      transform: translate(-50%,0);
      text-align: center;
      display: block;
      width: 100%;
      font-weight: $font-weight-semi-bold;
      color: $gray;
      @include font-size($base-font-size - 2);

      &:hover {
        color: $gray;
      }
    }

    &-subscription {
      min-height: 23px;
      @include clearfix();
    }

    &-subscription-link {
      float: left;
    }

    &-subscription-info {
      float: left;
      @include margin(1px 0 0 7px);

      svg {
        width: 18px;
        height: 18px;
      }
    }
  }

  .seed-container {
    width: 75%;
    float: right;
  }

  .seed-sku {
    position: relative;
    width: 25%;
    float: left;

    .product {
      margin-right: 20px;
    }

    .product-wrapper {
      background: $blue-light;
    }
  }

  .tns-outer {
    position: relative;

    &:hover {
      .tns-controls {
        opacity: 1;
      }
    }
  }

  .tns-controls {
    opacity: 0;

    button {
      background: rgba($gray, 0.1);
      position: absolute;
      z-index: 1000;
      width: 60px;
      height: 100px;
      -webkit-appearance: none;
      outline: none;
      top: 50%;
      transform: translate(0,-50%);
      border: 1px solid #ccc;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;

      .prev {
        transform: rotate(135deg);
        left: 6px;
      }

      .next {
        transform: rotate(-45deg);
        left: -3px;
      }

      &[disabled] {
        display: none;
      }

      &:hover {
        background: $gray-light;

        .dropdown-arrow {
          border-color: $blue;
        }

        .prev {
          left: 2px;
        }

        .next {
          left: 1px;
        }
      }
    }

    .dropdown-arrow {
      width: 20px;
      height: 20px;
      border-width: 0 4px 4px 0;
      border-color: rgba($blue, 0.5);
      float: none;
      top: 10px;
    }

    button[data-controls="next"] {
      right: 0;
      left: auto;
    }
  }
}

.is-fluid .product-slider {
  .btn.primary:not([disabled]):hover {
    background: $blue;
    border-color: $blue;
  }
}

.odTooltip {
  position: absolute;
  color: $black;
  display: none;
  width: 200px;
  padding: 16px 12px;
  border: 1px solid $gray-medium;
  z-index: 999999;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.1em;
  margin: 15px;
  background: $white;
}

.rr_cart_restricted {
  position: relative;
  .skulist_restricted_text {
    position: relative;
    bottom: auto;
    z-index: auto;
    clear: both;
    color: $red;
    font-weight: bold;

    &:hover + .odTooltip {
      display: inline-block;
      top: 10px;
      left: -20px;
    }
  }
}

@media (max-width: $screen-xs-max) {
  .product-slider .seed-container {
    width: 100%;
    margin: 0;
  }
}

@media (max-width: $screen-sm-max) {
  .product-slider .tns-controls {
    opacity: 1;
  }
}