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

Basic UX components

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

.root {
  display: block;
  position: relative;
  outline: none;
}

.root:hover .arrow {
  color: var(--input-border-color-focus);
}

.root:focus-within .arrow {
  color: var(--input-border-color-focus);
}

.disabled {
  composes: root;
  opacity: 0.5;
}

.hasFocus {
  composes: root;
}

.select {
  composes: root from 'part:@lyra/base/theme/forms/text-input-style';
  box-sizing: border-box;
  min-width: 7rem;
  appearance: none;
  position: relative;
  overflow: hidden;

  @nest &:not(:disabled) {
    @nest &:hover {
      box-shadow: var(--input-box-shadow--hover);
      border-color: var(--input-border-color-hover);
    }

    @nest &:focus, &:focus-within {
      box-shadow: var(--input-box-shadow--focus);
      border-color: var(--input-border-color-focus);
    }

    @nest &:active {
      border-color: var(--input-border-color-active);
    }

    @nest &:invalid {
      border-color: var(--input-border-color-invalid);
      background-color: var(--input-bg-error);
      box-shadow: var(--input-box-shadow--error);
    }
  }
}

.selectContainer {
  position: relative;
  color: var(--input-border-color);

  @nest &:hover {
    color: var(--input-border-color-focus);
  }

  @nest .hasFocus & {
    color: var(--input-border-color-focus);
  }
}

.selectContainerDisabled {
  composes: selectContainer;
  opacity: 0.5;
  color: var(--input-color);
  color: var(--text-color);

  @nest &:hover {
    color: inherit;
  }

  @nest .root:hover & {
    border-color: var(--input-border-color-hover);
  }

  @nest .hasFocus & {
    color: inherit;
  }

  @nest &:focus {
    border-color: var(--input-border-color-focus);
    box-shadow: var(--input-box-shadow--focus);
  }
}

.functions {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0.5em;
  height: 100%;
  color: var(--text-color);
  cursor: default;
  z-index: 1;
  pointer-events: none;

  @nest & > * {
    pointer-events: initial;
  }

  @nest & .arrow {
    pointer-events: none;
  }

  @nest & > *:not(:first-child) {
    margin-left: 0.5em;
  }

  @nest & svg {
    color: inherit;
  }

  @nest .selectContainerDisabled & {
    opacity: 0.5;
  }
}