$page-bullet-color: $gray;
$page-bullet-active-color: $blue;
$quick-filter-shadow: rgba(0, 0, 0, 0.12);

.page-header {
  &_border-all:has(~ .quick-filter) {
    padding: 0;
    margin-bottom: 24px;
    border: 0;
  }
}

.quick-filter {
  margin-bottom: 24px;

  &__title {
    text-align: left;
    margin-bottom: 8px;
  }

  &__slide {
    display: flex;
    flex-direction: column;
    align-items: center;

    // sass-lint:disable no-misspelled-properties
    gap: 8px;
    // sass-lint:enable no-misspelled-properties

    padding: 12px;
    width: 104px;
    height: auto;
    text-align: center;
    border: 1px solid $gray;
    border-radius: 16px;
    text-decoration: none;
    color: $gray-dark;

    img {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 8px;
    }

    &--selected {
      color: $blue;
      border-color: $blue;
    }

    &:hover,
    &:focus,
    &:active {
      text-decoration: none;
      border-color: $blue;
    }
  }

  &__next-btn,
  &__prev-btn {
    position: absolute;
    top: 0;
    width: 48px;
    height: 100%;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: $blue;
    cursor: pointer;

    svg {
      position: relative;
      z-index: 1;

      // sass-lint:disable no-important
      width: 38px !important;
      // sass-lint:enable no-important

      height: 38px;
      margin-top: -30px;
    }
  }

  &__next-btn {
    right: 0;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 71px;
      background: linear-gradient(270deg, $white 37%, transparent 100%);
      pointer-events: none;
    }
  }

  &__prev-btn {
    left: 0;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 71px;
      background: linear-gradient(90deg, $white 37%, transparent 100%);
      pointer-events: none;
    }
  }

  &--locked {
    .swiper-wrapper {
      justify-content: center;
    }
  }

  .swiper-wrapper {
    align-items: stretch;
  }

  .swiper-pagination {
    position: static;
    margin-top: 24px;
    line-height: 6px;
  }

  .swiper-pagination-bullet {
    border-radius: 5px;
    background-color: $page-bullet-color;
    height: 6px;
    width: 6px;
    transition-property: width, background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease-in;
  }

  .swiper-pagination-bullet-active {
    background-color: $page-bullet-active-color;
    width: 24px;
  }

  &--icon {
    .quick-filter__slide {
      width: auto;
      padding: 10px;

      img {
        width: 58px;
        height: 58px;
      }

      &--selected img {
        // prettier-ignore
        filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1821%) hue-rotate(188deg) brightness(95%) contrast(101%);
      }
    }
  }

  &--icon-text {
    .quick-filter__slide {
      width: 104px;

      img {
        width: 58px;
        height: 58px;
      }

      &--selected img {
        // prettier-ignore
        filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1821%) hue-rotate(188deg) brightness(95%) contrast(101%);
      }
    }
  }

  &--text {
    .quick-filter {
      &__slide {
        width: auto;
        padding: 8px 16px;
        border-radius: 40px;
      }
    }

    .swiper-wrapper {
      padding: 4px 0;
    }
  }

  &--colour {
    .quick-filter {
      &__slide {
        width: auto;
        padding: 0;
        border: 0;

        .colour-swatch {
          position: relative;
          width: 40px;
          height: 40px;
          border: 1px solid $gray;
          border-radius: 50%;
        }

        &--selected .colour-swatch {
          border-color: $gray-dark;

          &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 38px;
            height: 38px;
            border: 3px solid $white;
            border-radius: 50%;
          }
        }
      }

      &__next-btn,
      &__prev-btn {
        display: none;
      }
    }

    .swiper-wrapper {
      flex-wrap: wrap;

      // sass-lint:disable no-misspelled-properties
      gap: 4px;
      // sass-lint:enable no-misspelled-properties
    }

    .swiper-pagination {
      display: none;
    }
  }
}

@include media-breakpoint-up(md) {
  .quick-filter {
    margin-bottom: 32px;

    &__title {
      text-align: center;
    }

    &__slide {
      width: 124px;

      img {
        width: 100px;
        height: 100px;
      }
    }

    &--icon {
      .quick-filter__slide {
        img {
          width: 68px;
          height: 68px;
        }
      }
    }

    &--icon-text {
      .quick-filter__slide {
        width: 112px;

        img {
          width: 68px;
          height: 68px;
        }
      }
    }

    &--colour {
      .swiper-wrapper {
        justify-content: center;
      }
    }

    .tooltip {
      display: flex;
      filter: drop-shadow(0 0 8px $quick-filter-shadow);
      margin-bottom: 4px;

      .arrow {
        &::before {
          border-top-color: $white;
        }
      }

      &-inner {
        // sass-lint:disable no-important
        padding: 8px 16px !important;
        // sass-lint:enable no-important

        background-color: $white;
        color: $gray-dark;
        font-size: 14px;
        border-radius: 4px;
      }
    }
  }
}