@import (reference) "./../../../styles/less/ring.less";

.np-select-input-options-container {
  display: flex;
  height: 100%;
  flex-direction: column;

  &:focus {
    outline: none;
  }

  @media (--screen-sm) {
    & {
      max-height: 28rem /* 448px */;
    }
  }
}

.np-select-input-options-status {
  display: flex;
  align-items: center;
  column-gap: var(--size-8);
  padding: var(--size-8) var(--size-24) 0px;
}

.np-select-input-options-status-icon {
  padding: 0 var(--size-4);
  color: var(--color-content-tertiary);
}

.np-select-input-query-container {
  display: flex;
  flex-direction: column;
  padding: var(--size-8);
}

.np-select-input-listbox-container {
  position: relative;
  height: var(--initial-height);
  scroll-padding-top: var(--size-8);
  scroll-padding-bottom: var(--size-8);
  overflow-y: auto;

  @media (--screen-sm) {
    & {
      height: auto;
    }
  }

  &--virtualized {
    /* The wrapping element shrinks this as needed */
    height: 100vh;
  }

  &--has-group {
    scroll-padding-top: var(--size-32);
  }
}

.np-select-input-listbox {
  border-radius: var(--radius-small);
  padding: var(--size-8);

  .focus-ring();
  --ring-outline-offset: calc(-1 * var(--ring-outline-width));

  .np-select-input-listbox-container--virtualized & {
    /* Adopted from `VList` in virtua: https://github.com/inokawa/virtua/blob/7f6ed5b37df6b480d4ff350f3960067c5b3519d2/src/react/VList.tsx#L113-L116 */
    overflow-y: auto;
    contain: strict;
    height: 100%;
  }
}

.np-select-input-footer {
  padding: var(--size-4) var(--size-24) var(--size-16);
}