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

Basic UX components

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

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

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

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

.arrow {
  transition: transform 0.1s linear, opacity 0.1s linear;
  outline: none;
  user-select: initial;

  @nest &:hover, &:focus {
    opacity: 1;
    transform: scale(1.3);
    color: var(--link-color);

    @nest & svg {
      color: var(--link-color);
    }
  }
}

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

.stickyContainer {
  position: relative;
  height: 0;
  box-sizing: border-box;
}

.popper {
  position: relative;
  z-index: var(--zindex-portal);
}

.listContainer {
  composes: shadow-24dp from 'part:@lyra/base/theme/shadows-style';
  display: block;
  max-height: 20rem;
  overflow: auto;
  border: 1px solid var(--component-border-color);
  box-sizing: border-box;
  background-color: var(--component-bg);
}

.listContainerHidden {
  composes: listContainer;
  display: none;
}

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

.spinner {
  display: block;
}

.openItem {
  transition: transform 0.1s linear, opacity 0.1s linear;
  opacity: 0.6;
  cursor: pointer;
  outline: none;

  @nest & a, & button {
    outline: none;
  }

  @nest &:hover, &:focus, &:focus-within {
    opacity: 1;
    transform: scale(1.3);
    color: var(--link-color);

    @nest & svg {
      color: var(--link-color);
    }
  }

  @nest &:active {
    opacity: 1;
    color: var(--text-color);

    @nest & svg {
      color: var(--text-color);
    }
  }

  @nest & svg {
    color: var(--text-color);
  }
}

.listSpinner {
  opacity: 0.5;
}

.clearButton {
  composes: textInput from 'part:@lyra/base/theme/forms/clear-button-style';
}