.block-faqs-list {
  inline-size: 100%;
  background-color: $color-white;

  .grid-container {
    display: grid;
    gap: $spacing-xl;
  }

  &-top {
    display: grid;
    width: 100%;
    max-width: occupies(10, 0);
    margin: auto;
    row-gap: $spacing-xl;
  }

  &-content {
    display: grid;
    @include grid-cols(12);

    
    @include media-up(lg) {
      &:has(.block-faqs-list__filters) {
        .block-faqs-list__items {
          @include col-span(8);
        }
      }
    }

    @include media-down(lg) {
      row-gap: $spacing-xxl;
    }
  }

  &__heading {
    display: grid;
    width: 100%;
    max-width: $width-md;
    margin: auto;
    text-align: center;
    row-gap: $spacing-xl;
  }

  &__search {
    .searchbox {
      position: relative;
      max-width: $width-md;
      margin: auto;
      z-index: 1;

      &-search {
        display: flex;
        width: 100%;
        background-color: $color-white;
        
        &-input {
          width: 100%;
          height: 64px;
          padding: 0 $spacing-md;
          border: 1px solid $color-black;
          border-right: 0;
          border-top-left-radius: 2px;
          border-bottom-left-radius: 2px;
          @extend %text-lg;
        }

        &-btn {
          @include btn-primary;
          @include icon('@/Images/icons/search.svg', 24px);

          width: 64px;
          height: 64px;
          padding: 12px;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
          flex: 1 0 auto;

          &.clean {
            display: none;
            position: absolute;
            right: 64px;
            background-color: transparent;
            border-top: 1px solid $color-black;
            border-bottom: 1px solid $color-black;
            border-radius: 0;
            @include icon('@/Images/icons/close.svg', 24px);
          }

          &.is-visible {
            display: flex;
          }
        }
      }
    }

    &-most {
      position: relative;
      display: flex;
      padding: $spacing-xxxl;
      margin-top: -$spacing-xl;
      gap: $spacing-sm;

      @include media-down(lg) {
        flex-wrap: wrap;
        padding: $spacing-xxxl $spacing-lg $spacing-sm;
      }

      &-list {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding-top: $spacing-xs;
        gap: $spacing-sm;

        li {
          width: calc(50% - $spacing-xs);

          @include media-down(md) {
            width: 100%;
          }
        }
      }
    }
  }

  &__filters {
    align-content: start;
    @include col-span(4);

    @include media-down(lg) {
      @include col-span(0);
    }

    &-box {
      position: sticky;
      top: calc(var(--header-top) + $spacing-lg);
      display: grid;
      row-gap: $spacing-xsm;
      background-color: $color-white;
    }

    .filter {
      display: grid;
      width: 100%;
      height: auto;
      padding: $spacing-smd;
      border: 1px solid $color-black20;
      border-radius: 2px;
      align-content: start;
      grid-template-rows: auto 0fr;
      transition: grid-template-rows $transition-default;

      &-label {
        display: flex;
        font-weight: $font-weight-bold;
        column-gap: $spacing-xs;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        @extend %heading-6;
        @include icon('@/Images/icons/plus.svg', 16px);
        @include btn-focus-visible(4px);

        &::after {
          flex: 0 0 auto;
        }
      }

      &-subs {
        display: grid;
        padding-top: 0;
        row-gap: $spacing-xsm;
        overflow: hidden;
        transition: padding-top $transition-default;
      }

      &-checkbox {
        display: flex;
        width: fit-content;
        align-items: center;
        gap: $spacing-xs;
        cursor: pointer;
        @include link-decoration;
       

        input[type='checkbox'],
        input[type='radio'] {
          @include screen-reader;
        }

        &:has(input:focus-visible) {
          outline-width: 1px;
          outline-style: solid;
          outline-color: $color-black;
          outline-offset: 4px;
        }

        &.is-active {
          font-weight: $font-weight-bold;
          @include icon('@/Images/icons/check-strok.svg', 16px);

          &::after {
            background-color: $color-accent;
          }

          &:hover {
            @include icon('@/Images/icons/close.svg', 16px);
          }
        }
      }

      &--open {
        grid-template-rows: auto 1fr;

        .filter {
          &-label {
            @include icon('@/Images/icons/minus.svg', 16px);
          }

          &-subs {
            padding-top: $spacing-xsm;
          }
        }
      }

      @include media-down(lg) {
        border: 2px solid $color-black;

        &-label {
          @include icon('@/Images/icons/chevron-down.svg', 16px);
        }

         &--open {
          .filter {
            &-label {
              @include icon('@/Images/icons/chevron-top.svg', 16px);
            }
          }
        }
      }
    }
  }

  &__items {
    display: grid;
    row-gap: $spacing-xs;
    align-content: start;
    @include col-span(0);

    .subcat:not(:first-of-type) {
      margin-top: $spacing-md;
    }
  }

  &__pagination {
    display: flex;
    justify-content: center;
  }

  .accordion {
    &-wrap {
      display: grid;
      border-radius: 2px;
      border: 1px solid $color-black20;
    }

    &-label {
      position: relative;
      display: flex;
      width: calc(100% - 20px);
      margin: 10px;
      padding: 10px;
      border-radius: 2px;
      background-color: transparent;
      text-align: left;
      column-gap: $spacing-sm;
      justify-content: space-between;
      align-items: center;
      transition: $transition-default;
      transition-property: background-color;
      @include icon('@/Images/icons/plus.svg', 16px);
      @extend %heading-6;
      @include btn-focus-visible;

      &::after {
        flex: 0 0 auto;
      }
    }

    &-panel {
      padding: 0 $spacing-smd;
      margin-top: 0;
      @include accordion;

      &-content {
        display: grid;
        column-gap: $spacing-xs;
        overflow: hidden;
        transition: $transition-default;
        transition-property: padding-bottom, margin-top;

        .card {
          position: relative;
          display: flex;
          width: 100%;
          padding: $spacing-sm;
          margin: $spacing-sm 0 0;
          background-color: $color-black5;
          flex-direction: column;
          row-gap: $spacing-sm;

          &-info {
            display: grid;
            gap: $spacing-xs;
          }

          &-links {
            display: flex;
            flex-wrap: wrap;
            gap: $spacing-xsm $spacing-lg;

            &:has(:nth-child(3)) {
              flex-direction: column;
            }
          }

          &-brush {
            display: none;
          }
        }
      }
    }

    &--open {
      .accordion {
        &-label {
          background-color: $color-teagreen;
          @include icon('@/Images/icons/minus.svg', 16px);
        }

        &-panel {
          @include accordion-open;

          &-content {
            // margin-top: -$spacing-xs;
            padding-bottom: $spacing-smd;
          }
        }
      }
    }
  }

  &-indexed {
    position: absolute;
    display: none;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0)
  }
}