.block-info-hub-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 {
    position: relative;
    width: 100%;
    max-width: $width-md;
    margin: auto;

    .searchbox {
      position: relative;
      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);
          }

          &.show {
            display: flex;
          }
        }
      }
    }

    &-suggestions {
      position: absolute;
      display: none;
      width: 100%;
      max-height: 380px;
      border: 1px solid $color-black;
      border-top: 0;
      border-bottom-left-radius: 2px;
      border-bottom-right-radius: 2px;
      background-color: $color-white;
      overflow-y: auto;
      z-index: 3;

      &-wrap {
        display: grid;
        padding: $spacing-md;
      }

      .suggestion {
        display: grid;
        width: 100%;
        padding: $spacing-xsm;
        border-bottom: 1px solid $color-black20;
        text-align: left;
        row-gap: $spacing-base;
        transition: background-color $transition-default;
        cursor: pointer;

        &-title {
          font-weight: $font-weight-bold;
        }

        &-snippet {
          b {
            font-weight: $font-weight-bold;
            background-color: $color-black10;
          }
        }

        &.seen {
          background-color: $color-black5;
        }

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

        &:hover,
        &:focus-visible {
          background-color: $color-teagreen;
          outline: none;
        }
      }

      &.open {
        display: block;
      }
    }
  }

  &__selectors {
    position: relative;
    z-index: 1;
    @include col-span(4);

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

    .category {
      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;

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

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

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

      &:not(:has(li)) {
        display: none;
      }

      &-title {
        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;
        padding-bottom: 0;
        row-gap: $spacing-xsm;
        overflow: hidden;
        transition: padding-top $transition-default;

        .btn {
          display: flex;
          text-align: left;
          column-gap: $spacing-xs;
          @include icon-left('@/Images/icons/sub.svg', 16px);
          @include link-decoration;
          @include btn-focus-visible(4px);
          
          &.select {
            font-weight: $font-weight-bold;
            @include icon('@/Images/icons/check-strok.svg', 16px);

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

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

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

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

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

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

  &__contents {
    display: grid;
    align-content: start;
    @include col-span(8);

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

    .panel {
      display: grid;
      grid-template-rows: 0fr;
      opacity: 0;
      transition:
        grid-template-rows 150ms ease-in-out 150ms,
        opacity 150ms ease-in-out;

      &.select {
        grid-template-rows: 1fr;
        opacity: 1;
        transition:
          grid-template-rows 150ms ease-in-out 150ms,
          opacity 150ms ease-in-out 300ms;
      }

      .contents {
        display: grid;
        row-gap: 2rem;
        overflow: hidden;

        &:not(:has(.block-downloads)) {
          .card {
            position: relative;
            display: flex;
            width: 100%;
            margin: $spacing-xl 0;
            flex-direction: column;
            row-gap: $spacing-md;

            &-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;
            }
          }
        }
      }
    }
  }

  &__download {
    @include col-span(0);

    .block-downloads {
      display: grid;
      grid-template-rows: 0fr;
      opacity: 0;
      transition:
        grid-template-rows 150ms ease-in-out 150ms,
        opacity 150ms ease-in-out;

      &.select {
        grid-template-rows: 1fr;
        opacity: 1;
        transition:
          grid-template-rows 150ms ease-in-out 150ms,
          opacity 150ms ease-in-out 300ms;
      }

      &__content {
        overflow: hidden;
      }
    }
  }
}