/**
* Mixins to filters.
*/

@mixin filter-accordion {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: $spacing-base;

  @include media-up(md) {
    row-gap: 0;
  }
}

@mixin filter-accordion-controller {
  background-color: $color-gray-warm;
  position: sticky;
  top: 0;
  z-index: 10;
  padding: $spacing-base;

  @include media-up(md) {
    position: static;
    padding: 0;
    z-index: initial;
  }
}

@mixin filter-accordion-collapsible {
  @include accordion-collapsible;

  @include media-up(md) {
    position: absolute;
    top: 24px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    grid-template-rows: 1fr;
  }
}

@mixin filter-accordion-content {
  @include accordion-content;

  display: flex;
  flex-direction: column;
  row-gap: $spacing-16;

  @include media-up(md) {
    overflow: visible;
    padding: $spacing-20 $spacing-32 $spacing-32;
    row-gap: $spacing-32;
  }
}

@mixin filter-accordion-open($color: $color-black) {
  @include link-icon-right;

  font-weight: $font-weight-medium;
  width: 100%;

  &::before {
    mask-image: url('@/assets/icons/chevron-down.svg');

    .accordion-open & {
      mask-image: url('@/assets/icons/chevron-up.svg');
    }
  }

  @include media-up(md) {
    width: auto;
    font-size: 16px;
    font-weight: $font-weight-medium;
  }

  .selected {
    color: $color;
    text-transform: capitalize;

    @include media-down(md) {
      display: block;
      background: none !important;
      font-size: 16px;
    }
  }

  &.filter-selected {
    .placeholder {
      @include media-up(md) {
        display: none;
      }
    }
  }
}

@mixin filter-accordion-close {
  display: none;

  @include media-up(md) {
    @include btn-icon('close');
  }
}

@mixin filter-choice {
  overflow: initial;

  &::after {
    content: none;
  }

  /* &:focus-visible {
    .choices__inner {
      .choices__item {
        &::after {
          border-color: $color-black;
        }
      }
    }
  } */

  &.is-open {
    .choices__inner {
      .choices__item {
        &::before {
          mask-image: url('@/assets/icons/chevron-up.svg');
        }
      }
    }
  }
}

@mixin filter-choice-inner($color: $color-black) {
  display: none;
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0 !important;
  min-height: 0;
  overflow: initial;

  .choices__list--single {
    padding: 0;
  }

  .choices__item {
    @include link-icon-right;

    font-size: 16px;
    font-weight: $font-weight-medium;
    opacity: 1;
    background-image: linear-gradient(currentcolor, currentcolor);
    background-repeat: no-repeat;
    background-position: left 0 bottom 10%;
    background-size: 0 0.0625em;
    transition: background-size $transition-default;

    &::before {
      mask-image: url('@/assets/icons/chevron-down.svg');
    }

    &:not(.choices__placeholder) {
      color: $color;

      &::before {
        background-color: $color-black;
      }
    }
  }

  @include media-up(md) {
    display: block;
  }
}

@mixin filter-choice-list-dropdown($color: $color-black) {
  border: 0;
  visibility: visible;
  background-color: transparent;
  opacity: 1;
  border-radius: 0;
  top: 24px;
  margin: 0;
  cursor: initial;
  transition:
    opacity $transition-default,
    visibility $transition-default;

  &[aria-expanded='true'] {
    opacity: 1;
    visibility: visible;
    z-index: 2;
  }

  @include media-down(md) {
    position: static;
    overflow: visible;
  }

  @include media-up(md) {
    width: auto;
    opacity: 0;
    visibility: hidden;
  }

  .choices__list {
    max-height: none;
    overflow: visible;
    column-count: 2;
    column-gap: $spacing-8;

    @include media-up(md) {
      column-count: 2;
      column-gap: $spacing-24;
      border: 1px solid $color-black;
      padding: $spacing-20 $spacing-40;
      background-color: $color-white;
      row-gap: $spacing-16;
    }
  }

  .choices__item {
    @include link-underline;

    cursor: pointer;
    width: 100%;
    white-space: nowrap;
    word-break: normal;
    padding: 0;
    font-weight: $font-weight-semibold;
    margin-bottom: $spacing-16;
    font-size: 16px;
    font-style: normal;
    line-height: 120%;
    letter-spacing: 0.16px;

    &.is-highlighted {
      background-color: transparent;
    }

    &.is-selected {
      color: $color;
    }
  }

  .choices__placeholder {
    display: none;
  }
}