.compare {
  @extend %page-container;

  padding-top: 8px;
  padding-bottom: 30px;

  &.js-nothing-to-compare {
    .compare__table table {
      display: none;
    }

    .compare__filter {
      display: none;
    }

    .compare__nothing {
      display: block;
    }
  }
}

.compare__nothing {
  display: none;
}

.compare__filter {
  padding: 0 10px;

  .button-link {
    &:first-of-type {
      margin-right: 37px;
    }

    &.js-disabled {
      border-color: $color-primary-grey;
      color: $color-primary-grey;
      background-color: #fff;
      pointer-events: none;
    }
  }
}

.compare__table-wrp {
  position: relative;
  margin: 21px 0 0 12px;
}

.compare__table {
  &::-webkit-scrollbar {
    height: 12px;
  }

  /* Track */
  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px $color-primary-grey;
    border-radius: 10px;
  }

  /* Handle */
  &::-webkit-scrollbar-thumb {
    background: $color-primary-blue;
    border-radius: 10px;
  }

  scrollbar-base-color: $color-primary-blue;
  overflow-x: auto;
  overflow-y: visible;
  margin-left: 186px;
  padding: 0;
}

.compare__table table {
  width: auto;
  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: #939393;
  table-layout: fixed;

  tr {
    &.compare__row--buttons-mobile {
      display: none;
    }

    &:not(:first-of-type):not(.compare__row--title):not(.compare__row--buttons-mobile) {
      td,
      th {
        padding: 11px 15px;
      }
    }

    &:first-of-type {
      th {
        height: 150px;
      }

      td {
        padding: 10px;
        .picture-wrp {
          min-width: 167px;
          padding-bottom: 77.5%;
          border: 1px solid #d3d3d3;
        }
      }
    }

    //&:nth-of-type(2n):not(:last-of-type):not(.compare__row--title) {
    //  th,
    //  td {
    //    padding: 8px 15px;
    //    background-color: #f3f4f9;
    //  }
    //}

    &.js-even:not(:last-of-type) {
      th,
      td {
        padding: 8px 15px;
        background-color: #f3f4f9;
      }
    }

    &:last-of-type td {
      padding: 0 15px 20px;
    }
  }

  th,
  td {
    margin: 0;
  }

  th {
    position: absolute;
    top: auto;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 185px;
    font-weight: 700;
    padding: 8px 14px;
    text-align: left;
  }

  td {
    width: 187px;
    border-left: 2px solid #fff;

    a {
      text-decoration: underline;
    }
  }
}

.compare__row--title {
  th,
  th ~ td {
    padding: 8px 15px;
    background-color: #f3f4f9;
  }
}

.compare__buttons {
  .button-link {
    min-width: 157px;
    margin-top: 18px;
    display: block;

    span {
      &:last-of-type {
        display: none;
      }
    }

    &--with-icon {
      padding-left: 24px;

      svg {
        top: 17px;
        left: 18px;
        fill: $color-primary-grey;
      }

      &:hover {
        svg {
          fill: #fff;
        }
      }
    }

    &.js-in-cart {
      span {
        &:first-of-type {
          display: none;
        }

        &:last-of-type {
          display: inline;
        }
      }
    }
  }
}

@include media('tablet-s') {
  .compare {
    padding: 0 0 30px;
  }

  .compare__filter {
    padding: 0 25px;

    .button-link {
      min-width: 160px;

      &:first-of-type {
        position: relative;
        margin-left: 10px;
        margin-right: -17px;
      }

      &:last-of-type {
        padding-left: 30px;
      }
    }
  }

  .compare__table-wrp {
    margin: 11px 0 0;

    &::before {
      content: '';
      position: absolute;
      left: 115px;
      top: 0;
      bottom: 0;
      width: 1px;
      background-color: #d3d3d3;
    }
  }

  .compare__table {
    margin-left: 120px;
  }

  .compare__table table {
    font-size: 10px;
    line-height: 12px;

    tr {
      &.compare__row--buttons-mobile {
        display: table-row;

        td {
          padding: 0 10px;
        }
      }

      &:first-of-type {
        th {
          visibility: hidden;
          height: auto;
        }

        td {
          padding: 7.5px 7.5px 0;
          .picture-wrp {
            min-width: 102px;
            padding-bottom: 77.5%;
            border: 1px solid #d3d3d3;
          }
        }
      }

      &:last-of-type:not(:first-of-type):not(.compare__row--title):not(.compare__row--buttons-mobile) {
        td,
        th {
          height: auto;
          padding: 5px 0;
        }
      }

      &.js-even.compare__row--title {
        th,
        td {
          background-color: #fff;
        }
      }

      &:not(.js-even):not(.compare__row--title):not(:last-of-type):not(:first-of-type):not(.compare__row--buttons-mobile) {
        th,
        td {
          padding: 9px 14px 7px;
          background-color: #f3f4f9;
        }
      }

      &.js-even:not(:last-of-type):not(.compare__row--title):not(.compare__row--buttons-mobile) {
        th,
        td {
          padding: 8px 14px 7px;
          background-color: #fff;
        }
      }
    }

    th {
      width: 112px;
      font-weight: 300;
    }

    td {
      width: 126px;
      text-align: center;
    }
  }

  .compare__buttons {
    display: none;

    &--mobile {
      display: block;
      padding-bottom: 14px;
    }

    .button-link {
      width: 100%;
      min-width: unset;

      &:first-of-type {
        margin-top: 7px;
      }

      &:not(:first-of-type) {
        margin-top: 14px;
      }

      &--with-icon {
        svg.icon {
          top: 12px;
          left: 14px;
          width: 8px;
          height: 8px;
        }
      }
    }
  }

  .compare__row--title {
    th {
      visibility: hidden;

      ~ td {
        padding: 12px 9px 17px;
        vertical-align: top;
        background-color: transparent;
      }
    }
  }
}

@include media('pre-mobile') {
  .compare__filter {
    padding: 0 14px;

    .button-link {
      min-width: unset;
      &:first-of-type {
        margin-left: 0;
      }
    }
  }
}