@import 'css/master/settings/settings';

#stickyHeader {
  max-height: 0;
  background: $white;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 -3px 11px 1px $gray;
  transition: max-height 0.3s;
  overflow: hidden;
  z-index: 999;
  @include box-sizing();

  .sticky_wrapper {
    width: 978px;
    height: auto;
    margin: 0 auto;
  }

  .sku_description {
    width: 65%;
    float: left;
    height: auto;
    border-right: 1px solid #E5E8EB;
    margin: 10px 0;

    .sku_image {
      float: left;
      margin-right: 10px;
      padding-bottom: 5px;
    }

    .sku_title {
      font-weight: 600;
      margin-bottom: 5px;
      display: block;
      padding-right: 30px;
      @include font-size($baseFontSize + 4);
    }
  }

  .sku_description .bvsColor {
    float: left;
    color: $blue;
    @include font-size($baseFontSize - 2);
    &:after, &:before {
      content: " ";
      display: table;
    }

    &:after {
      clear: both;
    }
  }

  .sku_atc {
    padding: 26px 0 0 20px;
    float: left;
    width: 32%;

    .quantityBox {
      float: left;
      margin-right: 20px;
      @include font-size($baseFontSize);
    }
  }

  .sticky_nav {
    float: left;
    clear: both;
    width: 100%;

    * {
      @include box-sizing();
      margin: 0;
      padding: 0;
    }

    ul {
      float: left;
      width:100%;
    }

    li {
      width: 23%;
      float: left;

      &.sticky_back_top {
        width: 8%;
        color: $white;
        position: relative;
        a {
          line-height: 20px;

          &:hover svg, &.active svg {
            fill: $black;
          }
        }

        .sticky_top_text {
          padding: 0px 0 3px;
          display: block;
          width: 100%;
        }

        .svg {
          float: left;
          clear: both;
          width: 100% !important;
          height: 19px !important;
          display: block;
        }

        svg {
          fill: $gray;
          width: 15px;
          height: 15px;
          position: absolute;
          top: 4px;
          left: 50%;
          margin-left: -9px;
          @include rotate(-90deg);
        }
      }

      /* two items */
      &:first-child:nth-last-child(2),
      &:first-child:nth-last-child(2) ~ li {
        width: 46%;
      }

      /* three items */
      &:first-child:nth-last-child(3),
      &:first-child:nth-last-child(3) ~ li {
        width: 30%;
      }

      a {
        text-align: center;
        width: 100%;
        display: block;
        border-bottom: 3px solid $white;
        line-height: 42px;
        color: $gray;
        @include font-size($baseFontSize);

        &.active {
          color: $black;
          font-weight: $fontWeightSemiBold;
          border-bottom: 3px solid $red;
        }
      }
    }
  }

  .sticky_divider {
    border-bottom: 1px solid $grayLight;
    width: 100%;
  }

}

body:not(.tablet) #stickyHeader .sticky_nav li a:hover {
  color: $black;
  font-weight: $fontWeightSemiBold;
  border-bottom: 3px solid $red;
}

#stickyHeaderQty {
  cursor: text;
  color: #111;
  width: 42px;
  padding: 0 3px;
  border: solid 1px #cbcbcb;
  background: transparent;
  box-sizing: border-box;
  text-align: center;
  border-radius: $borderRadius;
  height: 48px;
}

#stickyHeaderSubmit {
  float: left;
  width: 200px;
  text-indent: 35px;
  background-image: url('//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/atc_shoppingcart.png');
  background-repeat: no-repeat;
  background-position: 30px 50%;
}

#stickyHeaderQty,
#stickyHeaderSubmit{
  line-height: 48px !important;
  box-sizing: border-box;
}

@media only screen and (min-width: 1258px) {
  #stickyHeader {
    .sku_description {
      width: 70%;
    }

    .sku_atc {
      width: 27%;
    }

    .sticky_wrapper {
      width: 1258px;
    }
  }
  #container.my_office_toolbar_is_visible #contentContainer {
    margin: 0 auto;
  }

  #stickyHeaderSubmit {
    width: 230px;
  }
}

#contentWrapper.productResponsive #reviewSection, #contentWrapper.productResponsive #productQATab {
  z-index: 1;
}

#sticky-qty-lmt-errorMessage {
  color: #b30000;
  @include font-size($baseFontSize - 2);
  margin-top: 10px;
  display: inline-block;
  font-weight: 600;
  margin-left: 24px;
}

#stickyHeaderQty.error {
  border: 1px solid $red;
}