@import "../../styles/themes.scss";
@import "../../styles/typography.scss";
@import "../../styles/states.scss";

.combobox--wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  @include font-general-text();

  &.sticky-category {
    .combobox-category {
      position: sticky;
      z-index: 10;
      background-color: var(--primary-background-color);
    }

    // Relative to Search height
    &.size-small {
      .combobox-category {
        top: 32px;
      }
    }
    &.size-medium {
      .combobox-category {
        top: 40px;
      }
    }
    &.size-large {
      .combobox-category {
        top: 48px;
      }
    }
  }

  &.empty {
    max-height: 200px;
  }

  &-search-wrapper {
    position: sticky;
    top: 0;
    background-color: var(--primary-background-color);
    z-index: 12;
  }

  &-search {
    flex: 0 0 auto;
  }

  &-no-results {
    flex: 1 1 auto;
    height: 100%;
    overflow: hidden;
    position: relative;
    padding: 0 16px;
    display: flex;
    flex-direction: column;

    .message-wrapper {
      flex: 1 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      .message {
        @include ellipsis();
      }
    }

    .add-new-button {
      flex: 0 0 auto;
      width: 100% !important;
      margin-bottom: 8px;

      .button-label {
        @include ellipsis();
      }
    }
  }

  &-list {
    flex: 1 1 auto;
    padding: 0 4px 8px 4px;
    overflow: auto;
    @include scroller;
  }
}