@spaced-out/ui-design-system/lib/components/Combobox/Combobox.module.css

Sense UI components library

@value (
  colorBackgroundSecondary,
  colorTextPrimary,
  colorFillNone
) from '../../styles/variables/_color.css';
@value (
  sizeFluid,
  size42
) from '../../styles/variables/_size.css';
@value (
  spaceNone,
  spaceXXSmall
) from '../../styles/variables/_space.css';
@value (
  borderRadiusNone,
  borderWidthPrimary
) from '../../styles/variables/_border.css';
@value (
  elevationCard
) from '../../styles/variables/_elevation.css';

.wrapper {
  display: flex;
  flex-direction: column;
  width: sizeFluid;
  gap: spaceXXSmall;
}

.info {
  display: flex;
  justify-content: space-between;
}

.infoContent {
  display: flex;
}

.box {
  display: flex;
  height: size42;
}

.box.withError .inputBox {
  /* Enable border for error state */
  border-left-width: borderWidthPrimary;
}

.locked {
  border-style: dashed;
}

.dropdownWrapper {
  flex: 1;
}

.dropdownBox {
  /* Alter dropdown box default values */
  background-color: colorBackgroundSecondary;
  border-top-right-radius: borderRadiusNone;
  border-bottom-right-radius: borderRadiusNone;
  border-right-color: colorFillNone;
  z-index: auto;
}

.dropdownWrapper:focus-within,
.dropdownBox:focus-within,
.dropdownBox:not(.disabled):not(.locked):hover {
  /* brings up the (default dropdown) box shadow on hover */
  z-index: elevationCard;
}

.inputWrapper {
  flex: 2;
  /* For error state input's default wrapper adds gap between box and zero height error text */
  gap: spaceNone;
}

.inputBox {
  /* Alter input box default values */
  border-top-left-radius: borderRadiusNone;
  border-bottom-left-radius: borderRadiusNone;
  border-left-color: colorFillNone;
  z-index: auto;
}

.inputWrapper:focus-within,
.inputBox:focus-within,
.inputBox:not(.disabled):not(.locked):hover {
  /* brings up the (default input) box shadow on hover */
  z-index: elevationCard;
}

.dropdownBox:not(.disabled) .chevron {
  color: colorTextPrimary;
}

.dropdownBox.locked,
.inputBox.locked {
  pointer-events: none;
}