@import "./_BottomSheet.less";
@import "./_ButtonInput.less";
@import "./_Popover.less";
@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";

.np-select-input-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-select-input-placeholder {
  color: var(--color-content-tertiary);
}

.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-separator-item {
  margin: var(--size-8);
  border-top-width: 1px;
}

.np-select-input-group-item {
  &--without-needle:first-child {
    margin-top: calc(-1 * var(--size-8));
  }
}

.np-select-input-group-item-header {
  position: sticky;
  top: 0px;
  z-index: 10;
  background-color: var(--color-background-elevated);
}

.np-select-input-option-container {
  display: flex;
  cursor: default;
  user-select: none;
  align-items: center;
  column-gap: var(--size-8);
  border-radius: var(--radius-small);
  padding: var(--size-12) var(--size-16);
  color: var(--color-interactive-primary);

  &:focus {
    outline: none;
  }

  &--active {
    box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
  }

  &--disabled {
    opacity: 0.45;
  }
}

.np-select-input-option-check {
  &--not-selected {
    visibility: hidden;
  }
}

.np-select-input-option {
  flex: 1;
}

.np-select-input-option-content-container {
  display: flex;
  align-items: center;
  column-gap: var(--size-8);
  color: var(--color-content-primary);
}

.np-select-input-option-content-icon {
  display: flex;

  &--not-within-trigger {
    align-self: flex-start;
  }
}

.np-select-input-option-content-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}

.np-select-input-option-content-text-secondary {
  color: var(--color-content-secondary);
}

.np-select-input-option-content-text-within-trigger {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-select-input-option-content-text-line-1 {
  > :not([hidden]) ~ :not([hidden]) {
    margin-right: var(--size-8);
    margin-left: var(--size-8);
  }
}

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

.np-select-input-addon-container {
  pointer-events: none;
  margin-inline-start: var(--size-4);
  display: inline-flex;
  align-items: center;

  & > :not([hidden]) ~ :not([hidden]) {
    margin-inline-start: var(--size-4);
  }
}

.np-select-input-addon {
  border-width: 0;
  background: none;

  display: inline-flex;
  height: var(--size-24);
  width: var(--size-24);
  align-items: center;
  justify-content: center;
  border-radius: 0.125rem /* 2px */; /* TODO: Tokenize */

  &--interactive {
    pointer-events: auto;
    color: var(--color-interactive-secondary);

    &:hover {
      color: var(--color-interactive-secondary-hover);
    }

    .focus-ring();
  }
}

.np-select-input-addon-separator {
  height: var(--size-24);
  border-inline-start: 1px solid var(--color-border-neutral);
}
