@use '../../../../mx-core/src/base/shape';
@use '../../../../mx-core/src/base/typography';

::ng-deep {
  .mx-select-search__panel-wrapper {
    max-height: 377px !important;
    min-height: 247px;
    position: relative !important;
    overflow: hidden !important;
  }
  .mx-select-search__panel-content__content__option,
  .mx-select-search__panel-content__content__nested-option {
    .mdc-list-item__primary-text.mdc-list-item__primary-text {
      @extend .gl-body-md;
    }
  }
}

.mx-select-search {
  &__panel-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;

    &__content {
      padding: 16px 16px 4px;

      &__search {
        width: 100%;
      }

      &__toolbar {
        margin: 8px -8px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }

  &__panel-content {
    position: relative;
    overflow: auto;
    height: 100%;

    &__content {
      position: relative;
      padding-bottom: 45px;
      padding-top: 106px;

      &__filter-count {
        @extend .gl-body-sm;
        padding: 8px 16px;
      }

      &__option-group-wrapper {
        &--hidden {
          display: none;
        }
      }

      &__option-group {
        display: flex;
        align-items: center;

        &__checkbox {
          label {
            @extend .gl-body-lg;
          }
        }
      }

      &__nested-option {
        padding-left: 88px;

        &.mx-select-search__panel-content__nested-option--hidden {
          display: none;
        }
      }

      &__option {
        @extend .gl-body-md;

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

  &__panel-footer {
    @extend .gl-body-sm;
    border-top-width: 1px;
    border-top-style: solid;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    border-radius: 0 0 4px 4px;
    box-sizing: border-box;
    height: 48px;
  }
}