.select {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: 320px;
  font-family: var(--font-family-base);
}

.select__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  width: 100%;
}
.select__label-text { color: var(--color-gray-900); }
.select__req        { color: var(--color-negative-500); }
.select__optional   { color: var(--color-gray-300); }

.select__tooltip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  color: var(--color-gray-200);
}
.select__tooltip svg { display: block; width: 16px; height: 16px; }

.select__field {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  width: 100%;
  padding: var(--spacing-10) var(--spacing-16);
  border-radius: var(--radius-8);
  background: var(--color-gray-0);
  box-shadow: inset 0 0 0 1px var(--color-gray-100), var(--shadow-4);
  overflow: hidden;
  cursor: pointer;
}

.select__icon {
  flex-shrink: 0;
  display: flex;
  color: var(--color-gray-400);
}
.select__icon svg { display: block; width: 20px; height: 20px; }

.select__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  overflow: hidden;
}
.select__placeholder { color: var(--color-gray-300); white-space: nowrap; }
.select__value       { color: var(--color-gray-800); white-space: nowrap; }
.select__caption {
  flex: 1 1 0;
  min-width: 0;
  color: var(--color-gray-300);
  text-align: right;
  white-space: nowrap;
}

.select__chevron {
  flex-shrink: 0;
  display: flex;
  color: var(--color-gray-400);
}
.select__chevron svg { display: block; width: 20px; height: 20px; }

.select__hint { margin: 0; color: var(--color-gray-400); width: 100%; }
.select__hint--error { color: var(--color-negative-500); }

.select--hover .select__field { box-shadow: inset 0 0 0 1px var(--color-gray-200), var(--shadow-4); }
.select--focus .select__field { box-shadow: inset 0 0 0 2px var(--color-accent-400), var(--shadow-4); }

.select--status-error .select__field { box-shadow: inset 0 0 0 1px var(--color-negative-500), var(--shadow-4); }
.select--status-error.select--hover .select__field { box-shadow: inset 0 0 0 1px var(--color-negative-600), var(--shadow-4); }
.select--status-error.select--focus .select__field { box-shadow: inset 0 0 0 2px var(--color-negative-500), var(--shadow-4); }

.select--disabled .select__field {
  box-shadow: inset 0 0 0 1px var(--color-gray-50), var(--shadow-4);
  background: var(--color-gray-25);
  cursor: not-allowed;
}
.select--disabled .select__label-text,
.select--disabled .select__optional,
.select--disabled .select__tooltip,
.select--disabled .select__icon,
.select--disabled .select__placeholder,
.select--disabled .select__value,
.select--disabled .select__caption,
.select--disabled .select__chevron,
.select--disabled .select__hint {
  color: var(--color-gray-100);
}

.select--focus .select__field { overflow: visible; }

.select__menu {
  position: absolute;
  left: -2px;
  right: -2px;
  top: 46px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-4);
  background: var(--color-gray-0);
  border: 1px solid var(--color-gray-50);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-4);
  overflow: hidden;
  cursor: default;
}

.select__menu .di { width: 100%; }

.select__scrollbar {
  position: absolute;
  top: var(--spacing-8);
  right: 3px;
  bottom: var(--spacing-8);
  width: 4px;
}
.select__scrollbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 75%;
  background: var(--color-gray-50);
  border-radius: var(--radius-8);
}

.select--live .select__menu { display: none; }
.select--live.select--open .select__menu { display: flex; }
.select--live.select--open .select__field { overflow: visible; box-shadow: inset 0 0 0 2px var(--color-accent-400), var(--shadow-4); }
.select--live .select__field:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-accent-400), var(--shadow-4); }