@import './../../../../sources/styles/include.scss';

$component: 'widget';
$template: 'products-small-1';
$class: #{$component};
$item: #{$component}-item;

.widget.c-#{$component}.c-#{$component}-#{$template} {
  position: relative;
  width: 300px;
  @media all and (max-width: 768px) {
    width: 100%;
    padding: 30px 0 27px 16px;
  }

  .widget-content {
    margin-top: 5px!important;
  }

  &:hover {
    .#{$class}-banner-products-nav {
      opacity: 1;
    }
  }

  .#{$class}-header {
    padding: 0 0 8px 0;
    &-text {
      font-weight: normal;
      font-size: 24px;
      line-height: 40px;
      color: #1B1E25;
    }
    @media all and (max-width: 768px) {
      padding: 0 16px 10px 0;
      &-text {
        font-size: 20px;
      }
    }
  }

  .#{$class}-content {
    margin-top: 0;
    @media all and (max-width: 768px) {
      padding-right: 16px;
    }
  }

  //Навигационные стрелки слайдера
  .#{$class}-banner-products-nav {
    opacity: 0;
    font-size: 0;
    pointer-events: none;
    z-index: 2;
    position: absolute;
    left: 0;
    right: 0;
    top: 42%;
    @include transition(0.4s, opacity);

    button {
      padding: 0;
      outline: none;
      pointer-events: all;
      position: absolute;
      display: inline-block;
      width: 40px;
      height: 40px;
      background-color: #FFF;
      cursor: pointer;

      @include border-radius(2px);
      @include transform-translate(null, -50%);
      @include transition(0.35s, #{border,background-color, opacity});

      &.nav-next {
        right: -20px;
      }
      &.nav-prev {
        left: -20px;
      }
      &:hover {
        svg {
          path {
            stroke: #F2F2F2;
          }
        }
      }
      svg {
        path {
          transition: stroke 0.4s;
        }
      }
      &.disabled {
        opacity: 0 !important;
        pointer-events: none;
      }
    }

    &[data-view='shadow'] {
      button {
        border: none;
        @include box-shadow(0, 4px, 16px, 0, rgb(27 30 37 / 16%));
      }
    }
    &[data-view='border'] {
      button {
        border: 1px solid #E8E8E8;
      }
    }

    @media all and (max-width: 768px) {
      display: none;
    }
  }

  //Навигационные точки слайдера
  .#{$class}-banner-products-dots {
    text-align: center;
    .owl-dot {
      padding: 0;
      outline: none;
      pointer-events: all;
      display: inline-block;
      width: 9px;
      height: 9px;
      margin: 0 8px;
      background-color: #E8E8E8;
      border: 1px solid #E8E8E8;
      cursor: pointer;

      @include border-radius(50%);
      @include transition(0.35s, #{background-color, border-color});
    }
    @media all and (max-width: 768px) {
      display: none;
    }
  }

  .#{$item}-mobile-button {
    display: none;
  }

  .#{$class}-items {
    padding-bottom: 3px;
    @media all and (max-width: 768px) {
      border: none;
      padding-bottom: 0;
    }

    &.one-item {
      padding-bottom: 0;
    }
  }

  .#{$item} {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    border: 1px solid #F2F2F2;

    //Сообщение о максимальном кол-ве товара
    &-counter-max-message {
      text-align: left!important;
      display: none;
      background-color: #FFFFFF;
      position: absolute;
      padding: 18px 22px;
      width: 235px;
      box-shadow: 0 0 24px rgba(27, 30, 37, 0.08);
      font-weight: normal;
      font-size: 13px;
      line-height: 16px;
      color: #404040;
      top: -89px;
      left: 60px;
      z-index: 10;
      &:before {
        content: '';
        position: absolute;
        bottom: -26px;
        left: 51px;
        border: 13px solid transparent;
        border-top: 13px solid #FFFFFF;
      }
      &-close {
        position: absolute;
        width: 10px;
        height: 10px;
        font-size: 20px;
        top: 5px;
        right: 10px;
        color: #000000;
        cursor: pointer;
      }
      @media all and (max-width: 1200px) {
        width: 200px;
      }
    }

    //Контейнер с основной инф. о товаре
    &-base {
      padding: 24px 30px;
    }
    //Контейнер с кнопкой покупки и счетчиком
    &-advanced {
      padding-bottom: 56px;
      @include transition(0.4s, opacity);
    }
    //Контейнер с кнопками
    &-action-buttons {
      display: none;
      text-align: center;

      &[data-offer='false'] {
        display: block;
      }
    }
    //Кнопка отложить, сравнить и т.д.
    &-action-button {
      margin-right: 24px;
      display: inline-block;
      text-align: center;
      cursor: pointer;
      line-height: 1;
      @include transition(0.4s, null);

      &:last-child {
        margin-right: 0;
      }

      svg {
        path {
          transition: stroke 0.4s, fill 0.4s;
        }
      }

      &-delay {
        display: inline-block;
        &[data-basket-state='delayed'] {
          display: none;
        }
      }
      &-delayed {
        display: none;
        &[data-basket-state='delayed'] {
          display: inline-block;
          opacity: 1;
        }
      }
      &-compare {
        display: inline-block;
        position: relative;
        &[data-compare-state='added'] {
          display: none;
        }
      }
      &-compared {
        display: none;
        position: relative;
        &[data-compare-state='added'] {
          display: inline-block;
          opacity: 1;
        }
      }
      &-quick-view {
        @media all and (max-width: 1200px) {
          display: none !important;
        }
      }
      &-order-fast {
        @media all and (max-width: 768px) {
          display: none !important;
        }
      }
    }
    //Изображение
    &-image {
      position: relative;
      z-index: 1;
      display: none;

      &-container {
        position: relative;
        margin-top: 8px;
        @media all and (min-width: 769px) {
          height: 182px;
        }
      }
      &[data-offer='false'] {
        display: block;
      }
      &-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
        white-space: nowrap;
        @media all and (min-width: 769px) {
          height: 182px;
        }

        .owl-stage-outer,
        .owl-stage,
        .owl-item {
          @media all and (min-width: 769px) {
            height: 182px;
          }
        }
      }
      &-element {
        display: block;
        white-space: nowrap;
        cursor: pointer;
        @media all and (min-width: 769px) {
          height: 182px;
        }
      }
      .owl-nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        opacity: 0;

        @include transition(0.4s, opacity);

        > button {
          position: absolute;
          width: 25px;
          height: 25px;
          font-size: 14px;
          line-height: 25px;
          text-align: center;
          color: #ababab;

          @include transition(0.4s, color);

          &:hover {
            color: #000;
          }
        }
        .disabled {
          color: #ebebeb!important;
        }
      }
      .owl-prev {
        left: -25px;
      }
      .owl-next {
        right: -25px;
      }
      .owl-dot {
        span {
          display: block;
          height: 2px;
          background: #F2F2F2;
        }
      }
    }
    //Стикеры
    &-marks {
      position: absolute;
      top: 4px;
      right: 4px;
      pointer-events: none;
      z-index: 2;
      text-align: right;
    }
    //Рейтинг
    &-vote {
      margin-top: 16px;

      & .ns-bitrix.c-iblock-vote.c-iblock-vote-template-3 .iblock-vote-rating-item {
        font-size: 14px;
        padding: 0 6px;
      }
    }
    //Название товара
    &-name {
      font-size: 0;
      margin-top: 8px;
      overflow: hidden;

      div, a {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: 16px;
        line-height: 22px;
        font-weight: 400;
        color: #404040;
        text-decoration: none;
        cursor: pointer;

        @include transition(0.4s, color);
      }
    }
    //Контейнер с кол-м и артикулом
    &-information {
      margin-top: 4px;
    }
    //Общее кол-во товара
    &-quantity {
      display: none;

      &[data-offer='false'] {
        display: block;
      }
      &-wrap {
        margin-right: 8px;
      }
      &-icon {
        height: 4px;
        width: 4px;

        @include border-radius(50%);

        &[data-quantity-state="many"], &[data-quantity-state="enough"] {
          background-color: #1DB940;
        }
        &[data-quantity-state="few"] {
          background-color: #F4BB28;
        }
        &[data-quantity-state="empty"] {
          background-color: #B0B0B0;
        }
      }
      &-value {
        font-size: 12px;
        line-height: 16px;

        &[data-quantity-state="many"], &[data-quantity-state="enough"] {
          color: #1DB940;
          border-color: #1DB940;
        }
        &[data-quantity-state="few"] {
          color: #F4BB28;
          border-color: #F4BB28;
        }
        &[data-quantity-state="empty"] {
          color: #B0B0B0;
          border-color: #B0B0B0;
        }

        span {
          display: inline-block;

          &[data-role="stores.popup.button"] {
            border-bottom: 1px dashed;
            @include transition(0.4s, border-color);
          }
        }
        &-numeric {
          color: #B0B0B0;
          margin-left: 4px;
        }
      }
    }
    //Свойства офферов
    &-offers-properties {
      margin-top: 20px;
      margin-bottom: 20px;
      @include transition(0.4s, opacity);
    }
    //Свойство офферов
    &-offers-property {
      display: block;
      margin-top: 16px;

      &:first-child {
        margin-top: 0;
      }

      &-more {
        font-weight: 500;
        font-size: 12px;
        line-height: 16px;
        color: #808080;
        border-bottom: 1px dotted #B0B0B0;
        padding: 5px 0 2px 2px;
        margin-left: 10px;
        cursor: pointer;
        transition: color 0.4s, border 0.4s;
      }

      &-title {
        font-size: 12px;
        line-height: 16px;
        color: #808080;
      }
      &-value-selected {
        font-size: 12px;
        line-height: 16px;
        color: #404040;
      }
      &-values {
        display: block;
        font-size: 0;
        margin: 4px -3px -3px -3px;
      }
      &-value {
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 4px;
        border: 1px solid #F2F2F2;
        border-radius: 2px;
        cursor: pointer;
        background: #ffffff;
        color: #404040;
        overflow: hidden;
        @include user-select(none);
        @include transition(#{0.4s, 0.4s, 0.4s, 0.4s, 0.2s},#{color, border-color, background-color, opacity, transform});

        &:active {
          @include transform-translate(null, 3px);
        }
        &[data-state="hidden"] {
          display: none;
        }
        &[data-state="enabled"] {}
        &[data-state="disabled"] {
          opacity: 0.25;
          border-color: #e8e8e8 !important;

          &:active {
            @include transform-translate(null, 0);
          }
        }
        &[data-state="selected"] {
          color: #FFF;
        }
        &[data-prop-visibility='false'] {
          display: none;
        }
      }
      &-value-text {
        display: block;
        padding: 8px 10px;
        color: inherit;
        font-size: 12px;
        font-style: normal;
        font-weight: normal;
        line-height: 12px;
        min-width: 24px;
        text-align: center;
        @include box-sizing(border-box);
      }
      &-value-image {
        height: 20px;
        width: 20px;
        text-align: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 2px;
        overflow: hidden;
      }
      &[data-type="picture"] {
        .widget-item-offers-property-value {
          padding: 2px;
          border: 1px solid #E8E8E8;
          border-radius: 2px;
          background-color: #FFFFFF !important;
        }
      }
      &[data-extended="true"] {
        display: none;
      }
      &[data-visible="false"] {
        display: none !important;
      }
    }
    //Расширенный вывод офферов
    &-offers-property-extended {
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      width: 25px;
      z-index: 4;
      opacity: 0;
      @include transition(0.4s, opacity);

      &[data-side='left'] {
        left: -30px;
      }
      &[data-side='right'] {
        right: -30px;
      }
      &-values {
        overflow: hidden;
        text-align: center;
      }
      &-value {
        position: relative;
        color: #000;
        cursor: pointer;
        margin-bottom: 10px;

        &:nth-last-child(2) {
          margin-bottom: 0;
        }
        &-text {
          font-size: 12px;
          line-height: 12px;
          @include user-select(none);
          @include transition(0.4s, null);
        }
        &-image {
          width: 15px;
          height: 15px;
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
          border: 1px solid #ebebeb;
          border-radius: 50%;
          margin-left: 5px;
          margin-right: 5px;
          @include box-sizing(border-box);
          @include transition(0.4s, border);
        }
        &-overlay {
          position: absolute;
          top: 0;
          left: 5px;
          right: 5px;
          width: 15px;
          height: 15px;
          background-color: #e8e8e8;
          opacity: 0.9;
          display: none;
          @include border-radius(50%);
        }
        &[data-state='hidden'] {
          display: none;
        }
        &[data-state='selected'] {
          .widget-item-offers-property-extended-value-text {
            text-decoration: underline;
          }
        }
        &[data-state='disabled'] {
          .widget-item-offers-property-extended-value-text {
            text-decoration: line-through;
            opacity: 0.4;
          }
          .widget-item-offers-property-extended-value-overlay {
            display: block;
          }
        }
      }
      &[data-visible="false"] {
        display: none !important;
      }
    }
    //Цена
    &-price {
      margin-top: 8px;
      &-discount {
        font-size: 18px;
        line-height: 18px;
        font-weight: 600;
        color: #404040;
      }
      &-base {
        display: none;
        font-size: 14px;
        line-height: 16px;
        color: #B0B0B0;
        text-decoration: line-through;
        visibility: hidden;
      }
      &[data-discount='true'] {
        .widget-item-price-base {
          display: block;
          visibility: visible;
        }
      }

      //Расширенный вывод цен
      &-extended {
        position: absolute;
        top: 30px;
        left: -10px;
        z-index: 1;
        width: 270px;
        opacity: 0;
        background-color: #FFF;
        pointer-events: none;
        @include user-select(none);
        @include box-shadow(0 16px 32px rgba(27, 30, 37, 0.08));
        @include transition(0.4s, opacity);

        &.active {
          opacity: 1;
          pointer-events: initial;
          @include user-select(initial);
        }

        @media all and (max-width: 768px) {
          width: 210px;
        }

        &-wrap {
          display: none;

          &[data-offer='false'] {
            display: block;
          }
        }
        &-button {
          position: relative;
          width: 25px;
          height: 15px;
          margin-right: 4px;
          vertical-align: middle;
          border: 1px solid #F2F2F2;
          border-radius: 2px;
          cursor: pointer;
          @include transition(0.4s, 'color, background-color, border-color');

          & .dots {
            height: 100%;
          }

          & .dot {
            width: 3px;
            height: 3px;
            margin: 0 1px;
            background: #404040;
            border-radius: 50%;
            @include transition(0.4s, background);
          }

          &:hover i {
            background: #FFFFFF;
          }
        }
        &-background {
          padding: 30px;
        }
        &-header {
          margin-bottom: 24px;
        }
        &-title {
          font-weight: 600;
          font-size: 14px;
          line-height: 14px;
          letter-spacing: 0.1em;
          text-transform: uppercase;
          color: #1B1E25;
        }
        &-button-close {
          font-size: 18px;
          line-height: 18px;
          color: #B0B0B0;
          cursor: pointer;
        }
        &-item {
          position: relative;

          & + .widget-item-price-extended-item {
            margin-top: 12px;
          }

          & .background-border {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 3px;
            z-index: -1;
            height: 1px;
            background-image: linear-gradient(90deg, #F2F2F2 50%, transparent 50%);
            background-position: bottom;
            background-size: 6px 1px;
          }
        }
        &-quantity {
          font-size: 12px;
          line-height: 12px;
          color: #808080;
          background: #FFF;
        }
        &-value {
          font-weight: 500;
          font-size: 14px;
          line-height: 14px;
          text-align: right;
          color: #404040;
          background: #FFF;
        }
      }
    }
    //Счетчик кол-ва товара для корзины
    &-counter {
      text-align: center;

      .intec-ui-control-numeric {
        width: 100%;
        justify-content: space-between;
        border-left: none;
        border-right: none;
        &.one-item {
          border-bottom: none;
        }

        .intec-ui-part-increment, .intec-ui-part-decrement {
          font-size: 16px;
          padding: 16px 21px;
          @media all and (max-width: 1000px) {
            padding-left: 16px;
            padding-right: 16px;
          }
        }
        .intec-ui-part-increment {
          border-left: 1px solid #F2F2F2;
        }
        .intec-ui-part-decrement {
          border-left: 1px solid #F2F2F2;
          border-right: 1px solid #F2F2F2;
        }
      }
      .intec-ui-part-input {
        border-left: none;
        border-right: none;
      }
    }
    //Контейнер с кнопкой "В корзину"
    &-purchase {
      &-container {
        position: absolute;
        left: -1px;
        right: -1px;
        bottom: 0;
      }
      &-buttons {
        display: none;

        &[data-offer='false'] {
          display: block;
        }
      }
      &-detail-button, &-button {
        display: block;
        padding: 21px 0;
        font-size: 10px;
        text-align: center;
        letter-spacing: 0.1em;
        cursor: pointer;
        text-decoration: none;
        text-transform: uppercase;
        @include transition(0.4s, background-color);
      }
      &-detail-button {
        border-width: 1px;
        line-height: 12px;
      }
      &-button {
        color: #FFFFFF;
        font-weight: 600;
        line-height: 14px;

        & .intec-ui-part-effect {
          letter-spacing: initial;
        }

        &-add {
          display: block;

          &[data-basket-state='added'] {
            display: none;
          }
        }

        &-added {
          display: none;

          &[data-basket-state='added'] {
            display: block;
          }
        }
      }
    }
    //Таймер товара дня
    &-product-day-timer {
      display: none;
    }

    @media all and (max-width: 768px) {
      padding: 16px;
      &-base {
        padding: 0;
        display: flex;
      }
      &-advanced {
        display: none;
      }
      &-mobile-first-wrapper {
        display: flex;
        flex-direction: column;
        margin-right: 16px;
      }
      &-mobile-second-wrapper {
        overflow: hidden;
      }
      &-image {
        width: 77px;
        height: 89px;
        &-container {
          width: 77px;
          height: 89px;
          margin-top: 0;
          order: 1;
        }
      }
      &-name {
        font-size: 14px;
        line-height: 20px;
      }
      &-vote {
        margin-top: 0;
      }
      &-name {
        margin-top: 8px;
      }
      &-information {
        margin-top: 4px;
      }
      &-quantity-wrap {
        margin-right: 0;
      }
      &-price {
        &-discount {
          font-size: 16px;
          line-height: 18px;
        }
      }
      &-mobile-button {
        display: inline-block;
        margin-top: 16px;
        padding: 11px 16px;
        font-weight: 500;
        font-size: 10px;
        line-height: 10px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        border-width: 1px;
      }
      &-action-buttons {
        order: 2;
        margin-top: 9px;
      }
      &-action-button {
        margin-right: 4px;
        background: #FBFCFD;
        border: 1px solid #F2F2F2;
        border-radius: 2px;
        width: 29px;
        height: 29px;
        padding: 5px;
        svg {
          width: 17px;
          height: 17px;
          path {
            stroke: #404040;
          }
        }
        &:last-child {
          margin-right: 0;
        }
      }
      &-marks {
        display: none;
      }
    }
  }

  [data-available='false'] {
    .widget-item-counter {
      display: none;
    }
  }
  &[data-button='false'] {
    .widget-item-advanced {
      padding-bottom: 0;
    }
  }
  .align-left {
    text-align: left;
  }
  .align-center {
    text-align: center;
  }
  .align-right {
    text-align: right;
  }
}