@lyra/components/lib/selects/styles/CustomSelect.css

Basic UX components

@import 'part:@lyra/base/theme/variables-style';

.root {
  composes: root from 'part:@lyra/components/selects/default-style';
}

.inner {
  composes: textInput from 'part:@lyra/base/theme/forms/text-input-style';
  cursor: default;

  @nest .transparent & {
    transition: all 0.05s linear;
    background-color: transparent;
    border-color: transparent;

    @nest &:hover {
      background-color: var(--gray-lighter);
      border-color: var(--gray-light);
    }
  }
}

.selectContainer {
  composes: selectContainer from 'part:@lyra/components/selects/default-style';
}

.arrow {
  composes: arrow from './SearchableSelect.css';
}

.listContainer {
  composes: listContainer from './SearchableSelect.css';
}

.text {
  color: var(--text-color);
}

.listContainerHidden {
  display: none;
}

.noResultText {
  text-align: center;
  padding: 0.5em;
}

.spinner {
  position: absolute;
  top: 0.5em;
  right: 0.75em;
}

.item {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  min-height: 2em;
  cursor: default;

  &:hover {
    background-color: var(--selectable-item-color-hover);
  }
}
.activeItem {
  background-color: var(--gray-light--transparent);
}

.selectedItem {
  background-color: var(--selected-item-color);
}