// Helpers: variables, mixins, bootstrap (functions, variables, mixins)
@import 'helpers/helpers';

// Libraries
@import 'libs/libs';

// Base
@import 'common/common';

@import 'globals/global-partials';

// Components
@import 'globals/global-components';
@import 'components/accordion';
@import 'components/aside-nav2';
@import 'components/banner';//fully is used on prototype, and some styles are used in prod, needs check
@import 'components/legal-info';//present on proto, on prod it is just <p> needs check
@import 'components/clamp';
@import 'components/long-banner';

// Pages
@import 'pages/page_category-landing';
@import 'components/clamp-content';
@import 'pages/facets';

//fix long banner in page
.long-banner-wrap {
  margin-top: -40px;
}

//card output start
.card {
  flex-direction: row;
  margin-bottom: 30px;

  &.descr--normal {
    .product-card__description .card_offer_text {
      color: $gray-dark;
    }
  }
}

.card__inner {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  background-color: $white;
  border: 1px solid $gray;

  .card_filled &,
  .card_horizontal &,
  .component_filled {
    border: 0;
  }

  .card_filled &,
  .card_horizontal & {
    background: $gray-light;
  }

  .card_filled & {
    text-align: center;
  }

  .card_horizontal & {
    @include media-breakpoint-up(md) {
      //@include make-row;
      flex-direction: row;
      padding: 30px 15px;
    }
  }

  .card__img {
    border-bottom: 1px solid $gray;
  }

  .is-secondary & {
    flex-direction: row;
    border-left: 0;
    border-right: 0;


    @include media-breakpoint-up(sm) {
      flex-direction: column;
      border-left: 1px solid $gray;
      border-right: 1px solid $gray;
    }

    .product-card__wrap,
    .card__img-wrap {
      width: 50%;

      @include media-breakpoint-up(sm) {
        width: auto;
      }
    }

    .card__img {

      @include media-breakpoint-down(sm) {
        padding-top: 15px;
        padding-bottom: 10px;
        display: block;
        border-bottom: 0;
      }
    }
  }

  &.background-image {
    // sass-lint:disable no-url-domains
    // sass-lint:disable no-url-protocols
    background-image: url('https://media.wickes.co.uk/is/image/wickes/2018-Black-friday-BG-TEXTURE');
    background-position: center;

    @include media-breakpoint-down(sm) {
      padding-top: 20px;
    }
  }
}

.card__offers {
  @include badges;

  .full-width-offers & {
    width: 100%;

    @include media-breakpoint-down(sm) {
      width: calc(50% - 10px);
      left: 0;
    }
  }

  &-item {
    @include badge;

    &_new {
      background-color: $green-light;
    }

    &_clearance {
      background-color: $yellow;
      color: $gray-dark;
    }

    &_ends {
      background-color: $gray-dark-transparent75;
      font-size: .75rem;
      font-weight: 500;
      line-height: 14px;
    }

    &_discount-old-price {
      text-decoration: line-through;
      display: inline-block;
    }
  }
}

.card__img-wrap {
  flex-shrink: 0;
  position: relative;

  .card_horizontal & {
    @include media-breakpoint-up(md) {
      @include make-col-ready;
    }
    @include media-breakpoint-only(md) {
      @include make-col-ready;
      @include make-col(6);
    }
    @include media-breakpoint-up(lg) {
      @include make-col(3);
    }
  }

  .card_horizontal.large & {
    @include media-breakpoint-up(md) {
      @include make-col-ready;
    }
    @include media-breakpoint-only(md) {
      @include make-col-ready;
      @include make-col(6);
    }
    @include media-breakpoint-up(lg) {
      @include make-col(4);
    }
  }
}

.card__img {
  max-width: 100%;
  width: 100%;
}

.full-height {
  height: 100% !important;
}
//card output end

//product card output start
.product-card__title {
  margin-bottom: 10px;
  color: $blue;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.25rem;

  &:hover {
    color: $blue;
  }
}
//product card output end

//banner info output start
.banner-info {
  height: 100%;
  background-color: $gray-dark-transparent80;
  text-align: center;
  color: $white;

  &__offer {
    background-color: $red;
  }

  &__range {
    position: relative;

    &::after {
      content: '';
      height: 1px;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      background-color: $gray;
    }
  }

  &__description {
    @include media-breakpoint-down(md) {
      display: none;
    }
  }
}

.banner-info_large {
  padding: 40px 45px;

  @include media-breakpoint-down(md) {
    padding: 20px 10px;
  }

  .banner-info {
    &__offer {
      font-size: 2.875rem;
      line-height: 3.75rem;
      font-weight: 700;

      @include media-breakpoint-down(md) {
        margin: auto;
        max-width: 180px;
        font-size: 1.875rem;
        line-height: 2.5rem;
      }

      &__small {
        line-height: 1.4rem;
        font-size: 1rem;
        padding-bottom: 8px;
        font-weight: normal;
      }

      &__small-secondary {
        padding-top: 8px;
        padding-bottom: 0;
      }
    }

    &__range {
      margin-top: 10px;
      padding-bottom: 16px;

      @include media-breakpoint-down(md) {
        margin-top: 5px;
        padding-bottom: 10px;
        font-size: 1.5rem;
        line-height: 1.875rem;
        font-weight: 400;
      }

      &::after {
        width: 210px;

        @include media-breakpoint-down(md) {
          width: 150px;
          bottom: 5px;
        }
      }
    }

    &__term {
      margin-top: 20px;
      font-size: 1.125rem;
      line-height: 1.3125rem;

      @include media-breakpoint-down(md) {
        @include info-text;
        margin-top: 0;
      }
    }

    &__secondary-title {
      font-size: 1.6rem;
      white-space: pre-line;
    }

    &__description {
      margin-top: 20px;
    }

    &__action {
      min-width: 150px;
      margin-top: 20px;

      @include media-breakpoint-up(lg) {
        @include button-large;
        min-width: 210px;
      }

      @include media-breakpoint-down(md) {
        margin-top: 10px;
      }
    }
  }
}

.banner-info_small {
  padding: 24px 15px;

  .banner-info {
    &__offer {
      font-size: 1.875rem;
      line-height: 2.1875rem;
      font-weight: 700;
      width: 100%;
      padding: 7px;
    }

    &__range {
      margin-top: 20px;
      padding-bottom: 21px;
      font-size: 1.875rem;
      line-height: 2.1875rem;
      font-weight: 500;

      &::after {
        width: 190px;
      }
    }

    &__term {
      font-size: 1rem;
      line-height: 1.125rem;
      margin-top: 15px;
    }

    &__description {
      margin-top: 20px;
      line-height: 1.125rem;
    }

    &__action {
      @include button-full;
      margin-top: 17px;

      @include media-breakpoint-down(md) {
        margin-top: 26px;
      }
    }
  }
}
//banner info output end

//notification output start
.notification {
  padding: 8px 40px;
  border: 1px solid;
  position: relative;
  line-height: 1.57143;

  &__icon {
    position: absolute;
    left: 8px;
    top: 7px;
    font-size: 1rem;
  }

  &__close {
    position: absolute;
    right: 8px;
    top: 8px;
    font-size: .875rem;
    color: $warm-grey;
    cursor: pointer;

    &_white {
      color: $white;
    }
  }

  &__hide {
    position: absolute;
    right: 8px;
    top: 8px;
    font-size: .875rem;
    color: $warm-grey;
    cursor: pointer;
  }

  &_success {
    color: $green;
    border-color: $green;
    background: $green-transparent5;
    font-weight: 500;
  }

  &_warning {
    border-color: $yellow;
    background: $yellow-transparent5;
    font-weight: 500;

    .notification__icon {
      color: $yellow;
    }
  }

  &_reminder {
    color: $white;
    background: $warm-grey;
    width: 100%;
  }

  &_error {
    color: $red;
    border-color: $red;
    background: $red-transparent5;
    font-weight: 500;

    .notification__icon {
      color: $red;
      display: flex;
      justify-content: center;
      align-items: center;
      align-content: center;
    }
  }

  &_general {
    margin-bottom: 40px;

    @include media-breakpoint-down(sm) {
      margin-bottom: 30px;
    }
  }

  &_app {
    position: relative;
    padding: 5px 15px;
    color: $white;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 0;
    text-align: left;

    &-error {
      background-color: $app-error;
    }

    &-success {
      background-color: $green;
    }

    &:nth-child(2) {
      border-top: 2px solid $white;
    }

    .notification__close {
      top: 4px;
      right: 4px;
      color: $white;
    }
  }
}
//notification output end

@include media-breakpoint-up(lg) {
  .layout_left-aside-hide {
    .container {
      .content {
        flex: 0 0 100%;
        max-width: 100%;

        .category-landing .card {
          flex: 0 0 25%;
          max-width: 25%;
        }
      }

      .left-aside {
        display: none;
      }
    }
  }
}