nova-design-system/src/components/Select/_select.scss

@use "../../styles/tokens/typography" as *;

.select {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  min-width: 200px;

  &__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nds-spacing-xs);
    height: 38px;
    padding: 0 var(--nds-spacing-sm);
    background-color: var(--nds-surface);
    border: var(--nds-border-width-thin) solid var(--nds-border-strong);
    border-radius: var(--nds-radius-md);
    cursor: pointer;
    @include text-base;
    color: var(--nds-text);
    transition:
      border-color 130ms ease,
      box-shadow 130ms ease;
    &:hover {
      border-color: var(--nds-neutral);
    }
    &:focus-visible {
      outline: none;
      border-color: var(--nds-primary);
      box-shadow: 0 0 0 3px var(--nds-ring);
    }

    svg {
      color: var(--nds-neutral);
      transition: transform 160ms ease;
      flex-shrink: 0;
    }
  }
  &__placeholder {
    color: var(--nds-neutral);
  }

  &[data-open="true"] &__trigger {
    border-color: var(--nds-primary);
  }
  &[data-open="true"] &__trigger svg {
    transform: rotate(180deg);
  }

  &__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    background-color: var(--nds-surface);
    border: var(--nds-border-width-thin) solid var(--nds-border);
    border-radius: var(--nds-radius-md);
    box-shadow: var(--nds-shadow-md);
    padding: var(--nds-spacing-3xs);
    max-height: 240px;
    overflow-y: auto;
    display: none;
  }
  &__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    &--hidden {
      display: none;
    }
  }
  &--disabled {
    cursor: not-allowed;
    background-color: var(--nds-surface);
    color: var(--nds-neutral);
    border-color: var(--nds-border-strong);
    opacity: 0.55;
    & .select__trigger {
      cursor: not-allowed;
      &:hover {
        border-color: var(--nds-border-strong);
      }
    }
  }
  &[data-open="true"] &__menu {
    display: block;
  }
}