web/packages/design-system/lib/components/Select/select.module.css

@value globals: "../../styles/globals.css";
@value inputContainerHeight, inputExpandedHeight from globals;

.select {
  position: relative;
  background-color: var(--Surface-UI-Fill-Default);
  border: 1px solid var(--Border-Interactive-Default);
  border-radius: var(--Corner-radius-md);
  height: inputContainerHeight;
  box-sizing: border-box;

  &[data-required] .label::after {
    content: ' *';
  }
  &[data-open] {
    .chevron {
      rotate: -90deg;
    }

    .selectedText {
      min-height: inputExpandedHeight;
    }
  }
  &[data-focused] {
    outline-offset: -2px;
    outline: 2px solid var(--Border-Interactive-Focus);

    .button,
    .input {
      outline: none;
    }
    .input {
      min-height: inputExpandedHeight;
    }
    .label {
      color: var(--Text-Interactive-Focus);
    }
  }
  &[data-disabled] {
    border: none;
    .inner {
      background-color: var(--Surface-Primary-Disabled);
      color: var(--Text-Interactive-Disabled);
    }
    .button,
    .input,
    .label,
    .selectValue {
      color: var(--Text-Interactive-Disabled);
    }
  }
  &[data-invalid] {
    border-color: var(--Border-Interactive-Error);
  }
  &[data-invalid][data-focused] {
    outline: 2px solid var(--Border-Interactive-Error);
  }
}

.chevron {
  rotate: 90deg;
}

.inner {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: var(--Corner-radius-md);

  &.button {
    padding: 0 var(--Space-x15);
    gap: var(--Space-x1);
  }

  .button {
    padding: 0 var(--Space-x15) 0 var(--Space-x1);
    height: 100%;
  }

  > label {
    flex: 1;
    height: 100%;
    padding: 0 0 0 var(--Space-x15);
  }
}

.button,
.input {
  background: none;
  border: 0;
}

.input {
  height: 1px;
  padding: 0;
  width: 100%;

  &[value]:not([value='']) {
    min-height: inputExpandedHeight;
  }
}

.input,
.selectedText {
  min-height: 0;
  transition: min-height 150ms ease;
}

.selectedText:not(:empty) {
  min-height: inputExpandedHeight;
}

.displayText {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  height: 100%;
  position: relative;

  &:has(.input) {
    cursor: text;
  }
}

.selectValue {
  align-items: flex-start;
  color: var(--Text-Default);
}

.label {
  color: var(--Text-Interactive-Placeholder);
  white-space: nowrap;
  transition: font-size 150ms ease;
}

.popover {
  background-color: var(--Surface-Primary-Default);
  border-radius: var(--Corner-radius-md);
  box-shadow: 0 0 14px 6px rgb(0 0 0 / 10%);
  display: inline-flex;
  flex-direction: column;
  gap: var(--Space-x1);
  overflow: auto;
  padding: var(--Space-x2);
  outline: none;
  min-width: 280px;
  scrollbar-color: var(--Icon-Interactive-Disabled);
  scrollbar-width: thin;
}

.listBox {
  display: flex;
  flex-direction: column;
  gap: var(--Space-x1);
  outline: none;
}

.listBoxItem {
  padding: var(--Space-x1) var(--Space-x1) var(--Space-x1) var(--Space-x15);
  color: var(--Text-Default);
  border-radius: var(--Corner-radius-md);
  display: flex;
  align-items: center;
  gap: var(--Space-x1);

  &[data-focused] {
    outline: none;
  }
  &[data-focused],
  &[data-hovered] {
    background-color: var(--Surface-Primary-Hover);
  }
}