// sass-lint:disable no-url-domains, no-url-protocols

@import '../helpers/helpers';

$round-img-measure: 290px;

.page_online-exclusive {
  .heading2 {
    font-weight: bold;
    line-height: 2rem;
    font-size: 1.5rem;
    position: relative;
  }

  .online-exclusive {
    &__banner {
      background: url('https://media.wickes.co.uk/is/image/wickes/Online-exclusive-header-banner-final-mobile') center / auto 502px no-repeat;
      height: 502px;
      margin: 0 -15px;
      display: block;

      &-info {
        font-size: 1.5rem;
        padding: 0 60px;
        line-height: 2.125rem;
        display: none;
      }

      &-subtext {
        padding: 10px 60px;
        font-size: 1rem;
        line-height: 1.5rem;
        display: none;
      }

      .btn {
        display: none;
        background: $blue;
        color: $white;
        font-size: 1.125rem;
        border: 1px solid $white;
        width: 250px;
        margin-top: 20px;
        line-height: 22px;

        .discover-button-arrow {
          margin-left: 10px;
        }
      }
    }

    .ranges {
      &-card {
        position: relative;

        &_kitchens,
        &_interior-decor,
        &_tile-flooring,
        &_doors-windows,
        &_build-materials,
        &_tools-workwear,
        &_heating {
          display: none;
        }

        &-heading {
          p {
            font-size: 1.125rem;
          }
        }

        &::after {
          content: '';
          position: absolute;
          left: calc(50% - 200px / 2);
          bottom: 0;
          width: 200px;
          height: 8px;
          background-color: $blue-dark;
        }
      }
    }
  }

  .online-ranges {
    padding-bottom: 0;

    h3 {
      text-align: center;
    }

    .view-link {
      display: none;
    }

    .btn {
      border: 1px solid $blue;
      color: $blue;
      background: $white;
      text-align: left;
      position: relative;
      font-size: 1.125rem;
      padding: 5px 15px;

      &__text {
        text-align: left;
        position: unset;

        .icon {
          position: absolute;
          right: 10px;
          top: 8px;
        }
      }
    }

    .ranges {
      padding: 0 10px;
      border: 1px solid $blue;
      border-top: 0;
      display: none;

      &-el {
        color: $blue;
        text-decoration: none;
        display: block;
        padding: 7px 2px;
        border-bottom: 1px solid $gray-light;
        font-weight: 500;
        font-size: 1rem;
        position: relative;

        .icon {
          position: absolute;
          right: 0;
          top: 8px;

          svg {
            font-size: .75rem;
          }
        }
      }
    }
  }

  .border-bottom-rounded {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;

    &_false {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  .icon-rotated {
    transform: rotate(180deg);
  }

  .range-card-inner {
    margin-bottom: 40px;

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

    &__img {
      &-bg-helper {
        position: absolute;
        height: $round-img-measure / 2;
        background: $white;
        width: 100%;
        z-index: -1;
      }

      &-review {
        margin: 0 auto;
        width: $round-img-measure;
        background: $blue-dark;
        color: $white;
        position: relative;
        z-index: 0;

        img {
          width: $round-img-measure;
          height: $round-img-measure;
          border-radius: 50%;
        }
      }
    }

    &-heading {
      text-align: center;
    }

    &__info {
      margin-bottom: 15px;

      &-title {
        font-weight: 700;
        font-size: 1.3125rem;
      }

      &-text {
        font-size: 1rem;
        margin-bottom: 10px;
      }

      &-link {
        font-size: 1.125rem;
        text-decoration: none;
        font-weight: bold;

        svg {
          height: .875rem;
        }
      }
    }

    &__review {
      .quote {
        @include primary-text;
        padding: 40px;
        text-align: center;
        position: relative;

        .icon {
          &-left,
          &-right {
            position: absolute;

            svg {
              opacity: .3;
              font-size: 2rem;
              color: $white;
            }
          }

          &-left {
            left: 10px;
            top: 0;
          }

          &-right {
            right: 10px;
            bottom: 30px;
          }
        }

        &_author {
          margin-top: 10px;
        }
      }
    }
  }

  .card-block {
    position: relative;
    text-align: center;

    .heading3 {
      font-weight: bold;
      text-align: center;
    }

    .link-holder {
      font-size: 1rem;
      font-weight: bold;
    }

    .color-header {
      color: $blue-dark;
      margin-bottom: 20px;
    }

    &::after {
      content: '';
      position: absolute;
      left: calc(50% - 200px / 2);
      bottom: 0;
      width: 200px;
      height: 8px;
      background-color: $blue-dark;
    }
  }

  .customer-favourites {
    &-block {
      @include make-row;
      margin-top: 20px;

      &__item {
        @include make-col-ready;
        @include make-col(12);
        padding-bottom: 15px;

        &-wrap {
          position: relative;
          width: 100%;
          height: 100%;
        }

        .product {
          &-img {
            overflow: hidden;
            text-align: center;
            position: relative;
            height: 100%;
            width: 100%;
            background: $gray-bg;

            .full-width-img {
              width: 100%;
              height: 100%;
            }

            .full-height-img {
              margin-top: 45px;
              height: 75%;
              width: auto;
            }
          }

          &-star-rate {
            position: absolute;
            width: 105px;
            top: 10px;
            left: calc(50% - 105px / 2);
            z-index: 4;

            &__img {
              width: 100%;
            }
          }

          &-shadow {
            background: $shadow-gradient;
            width: 100%;
            height: 100%;
          }
        }

        &:hover {
          .customer-favourites__shadow {
            opacity: 1;
            visibility: visible;
          }
        }
      }
    }

    &__shadow {
      display: flex;
      flex-direction: column;
      justify-content: center;
      transition: .55s opacity, .55s visibility;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      background-color: $blue;
      color: $white;
      font-size: 1.25rem;
      font-weight: 500;
      text-align: center;
      padding: 0 30px;
      z-index: 10;
      opacity: 0;
      visibility: hidden;

      &-link {
        color: $white;
        font-size: 1rem;
        text-decoration: none;
      }
    }
  }

  .other-ranges {
    text-align: center;
    position: relative;
    padding-bottom: 10px;

    &__descr {
      margin: 10px 0 20px;

      a {
        text-decoration: none;
        font-weight: 500;
        font-size: 1rem;
      }
    }

    &__image {
      img {
        height: 203px;
        width: 203px;
        border-radius: 50%;
      }
    }

    &__item {
      &:hover {
        a {
          text-decoration: underline;
          font-weight: 600;
        }

        img {
          opacity: .5;
        }
      }

      &-wrapper {
        padding: 20px 0 10px;
      }
    }

    &::after {
      content: '';
      position: absolute;
      left: calc(50% - 200px / 2);
      bottom: 0;
      width: 200px;
      height: 8px;
      background-color: $blue-dark;
    }
  }

  // sass-lint:disable no-important
  .range-btn {
    background-color: $blue;
    color: $white !important;
    cursor: auto;
  }
}

@include media-breakpoint-up(md) {
  .page_online-exclusive {
    .online-exclusive {
      &__banner {
        background: url('https://media.wickes.co.uk/is/image/wickes/Online-exclusive-header-desktop-new') center no-repeat;
        background-size: contain;
        margin: 0;
        height: 360px;
      }
    }

    .online-ranges {
      position: relative;

      h3 {
        text-align: center;
      }

      .view-link {
        display: block;
        position: absolute;
        right: 0;
        top: 5px;
        font-weight: 500;
        font-size: 1.125rem;
      }

      .btn {
        display: none;
      }

      .ranges {
        @include make-row;
        border: 0;
        padding: 0;
        margin: 0 -10px;

        &-el {
          border: 1px solid;
          border-radius: 3px;
          font-size: 1.125rem;
          padding: 5px 10px;

          &-wrap {
            @include make-col(3);
            border-bottom: 0;
            padding: 10px;

            .icon {
              display: none;
            }

            &[data-value='view-btn'] {
              display: none;
            }
          }

          &:hover {
            background-color: $blue;
            color: $white;
          }
        }
      }
    }

    .other-ranges {
      &-heading {
        text-align: center;
      }

      &__item {
        text-align: center;

        &-wrapper {
          display: flex;
          justify-content: space-between;
        }

        &:hover {
          a {
            text-decoration: underline;
            font-weight: 600;
          }

          img {
            opacity: .5;
          }
        }
      }

      &__descr {
        margin-top: 10px;

        a {
          text-decoration: none;
          font-weight: 500;
        }
      }
    }

    .customer-favourites {
      &-block {
        &__item {
          padding: 5px;
        }
      }
    }
  }

  .page_online-exclusive {
    .online-exclusive {
      .range-card-inner {
        position: relative;

        &__info {
          position: absolute;
          z-index: 1;
          top: 55px;
        }

        &__img {
          background: $white;
          position: relative;

          &-bg-helper {
            display: none;
          }

          &-review {
            margin: 0 auto;
            width: 100%;
            position: relative;
          }

          img {
            width: 450px;
            height: 450px;
            position: relative;
            z-index: 1;
          }
        }

        &__review {
          position: absolute;
          width: 100%;
          background: $blue-dark;
          bottom: 45px;

          .quote {
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
        }

        &:nth-child(even) {
          .img {
            img {
              margin-left: calc(100% - 450px);
            }
          }
        }
      }

      .ranges-card-heading {
        text-align: center;
      }

      .other-ranges {
        &__item {
          width: 90px;

          &:first-child {
            display: none;
          }
        }

        &__image {
          img {
            width: 90px;
            height: 90px;
            border-radius: 50%;
          }
        }
      }

      .customer-favourites-block {
        @include make-col(12);
        margin: 20px 0 0;

        &__item {
          @include make-col(4);
        }
      }
    }
  }
}

@include media-breakpoint-up(lg) {
  .page_online-exclusive {
    .heading2 {
      font-size: 1.875rem;
    }

    .online-exclusive {
      &__banner {
        height: 480px;
      }

      .ranges-card {
        h4 {
          font-size: 1.5rem;
        }
      }

      .other-ranges {
        &__item {
          width: inherit;
        }

        &__image {
          img {
            border-radius: 50%;
            width: 122px;
            height: 122px;
          }
        }
      }
    }
  }
}

@include media-breakpoint-up(xl) {
  .page_online-exclusive {
    .online-exclusive {
      &__banner {
        height: 580px;
      }

      .range-card-inner {
        .quote {
          margin-left: 460px;
          height: 186px;

          .icon-left {
            left: 10px;
            top: 20px;
          }
        }

        &__info {
          margin-left: 470px;
        }

        &:nth-child(odd) {
          .range-card-inner {
            &__info,
            &__review > .quote {
              margin-right: calc(100% - 660px);
              padding-left: 50px;
              margin-left: 0;

              .icon-left {
                left: 10px;
              }

              .icon-right {
                right: 10px;
              }
            }

            &__info {
              padding-left: 0;
            }

            &__img {
              img {
                margin-left: calc(100% - 450px);
              }
            }
          }
        }
      }

      .other-ranges {
        &__image {
          img {
            border-radius: 50%;
            width: 144px;
            height: 144px;
          }
        }

        &::after {
          content: '';
          left: calc(50% - 555px / 2);
          bottom: 0;
          width: 555px;
        }
      }

      .customer-favourites-block {
        @include make-col(12);

        &__item {
          @include make-col(3);
        }
      }

      .ranges {
        &-card {
          &::after {
            content: '';
            left: calc(50% - 555px / 2);
            bottom: 0;
            width: 555px;
          }
        }
      }
    }

    .card-block {
      &::after {
        content: '';
        left: calc(50% - 555px / 2);
        bottom: 0;
        width: 555px;
      }
    }
  }
}

@include media-breakpoint-only(md) {
  .page_online-exclusive {
    .online-exclusive {
      .range-card-inner {
        position: relative;
        margin-top: 120px;

        &__info {
          top: -70px;
          position: absolute;
          z-index: 1;
          margin-left: 332px;

          &-text {
            margin-bottom: 0;
          }

          &-link {
            font-size: 1rem;
          }
        }

        &__img {
          background: $white;
          position: relative;

          &-bg-helper {
            display: none;
          }

          &-review {
            margin: 0 auto;
            width: 100%;
            position: relative;
          }

          img {
            width: 320px;
            height: 320px;
            position: relative;
            z-index: 1;
            bottom: 50px;
          }
        }

        &__review {
          position: absolute;
          height: 215px;
          width: 100%;
          background: $blue-dark;
          bottom: -10px;

          .quote {
            padding-left: 360px;
            padding-top: 15px;
            padding-bottom: 15px;
            height: 215px;

            .icon-left {
              left: 330px;
              top: 5px;
            }

            .icon-right {
              right: 5px;
              bottom: 5px;
            }
          }
        }

        &:nth-child(odd) {
          .range-card-inner {
            &__info,
            &__review > .quote {
              margin-right: calc(100% - 370px);
              padding-left: 45px;
              margin-left: 0;

              .icon-left {
                left: 10px;
                top: 10px;
              }

              .icon-right {
                right: 5px;
                bottom: 10px;
              }
            }

            &__info {
              padding-left: 0;
            }

            &__img {
              img {
                margin-left: calc(100% - 320px);
              }
            }
          }
        }
      }
    }

    .online-ranges {
      .ranges {
        &-el {
          &-wrap {
            @include make-col(4);
          }
        }
      }
    }
  }
}

@include media-breakpoint-only(lg) {
  .page_online-exclusive {
    .online-exclusive {
      .range-card-inner {
        position: relative;

        &__info {
          top: 50px;
          position: absolute;
          z-index: 1;
          margin-left: 410px;

          &-text {
            margin-bottom: 0;
          }

          &-link {
            font-size: 1rem;
          }
        }

        &__img {
          background: $white;
          position: relative;

          &-bg-helper {
            display: none;
          }

          &-review {
            margin: 0 auto;
            width: 100%;
            position: relative;
          }

          img {
            width: 390px;
            height: 390px;
            position: relative;
            z-index: 1;
            bottom: -30px;
          }
        }

        &__review {
          position: absolute;
          height: 190px;
          width: 100%;
          background: $blue-dark;
          bottom: -10px;

          .quote {
            margin-left: 400px;
            padding-top: 15px;
            padding-bottom: 15px;
            height: 190px;

            .icon-left {
              left: 10px;
              top: 10px;
            }

            .icon-right {
              right: 10px;
              bottom: 10px;
            }
          }
        }

        &:nth-child(odd) {
          .range-card-inner {
            &__info,
            &__review > .quote {
              margin-right: calc(100% - 540px);
              padding-left: 45px;
              margin-left: 0;

              .icon-left {
                left: 10px;
                top: 10px;
              }

              .icon-right {
                right: 10px;
                bottom: 10px;
              }
            }

            &__info {
              padding-left: 0;
            }

            &__img {
              img {
                margin-left: calc(100% - 390px);
              }
            }
          }
        }
      }
    }
  }
}