@use "../../wc";
@use "../../form-control";

:host {
  display: block;
}

/** The popup */
.select {
  flex: 1 1 auto;
  display: inline-flex;
  width: 100%;
  position: relative;
  vertical-align: middle;
}

.select::part(popup) {
  z-index: var(--zn-z-index-dropdown);
}

.select[data-current-placement^='top']::part(popup) {
  transform-origin: bottom;
}

.select[data-current-placement^='bottom']::part(popup) {
  transform-origin: top;
}

/* Combobox */
.select__combobox {
  flex: 1;
  display: flex;
  width: 100%;
  min-width: 0;
  position: relative;
  align-items: center;
  justify-content: start;
  font-family: var(--zn-input-font-family);
  font-weight: var(--zn-input-font-weight);
  letter-spacing: var(--zn-input-letter-spacing);
  box-shadow: var(--zn-shadow-x-small);
  vertical-align: middle;
  overflow: hidden;
  cursor: pointer;
  transition: var(--zn-transition-fast) color,
  var(--zn-transition-fast) border,
  var(--zn-transition-fast) box-shadow,
  var(--zn-transition-fast) background-color;
}

/* Prefix area: allow a leading control (e.g., checkbox) full-height */
.select__prefix {
  display: flex;
  align-items: center;
  align-self: stretch;
  height: 100%;
}

.select__display-input {
  position: relative;
  width: 100%;
  font: inherit;
  border: none;
  background: none;
  color: var(--zn-input-color);
  cursor: inherit;
  overflow: hidden;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
}

.select__display-input::placeholder {
  color: var(--zn-input-placeholder-color);
}

.select:not(.select--disabled):hover .select__display-input {
  color: var(--zn-input-color-hover);
}

.select__display-input:focus {
  outline: none;
}

/* Visually hide the display input when multiple is enabled (but not when search is active and open) */
.select--multiple:not(.select--placeholder-visible):not(.select--search) .select__display-input,
.select--multiple.select--search:not(.select--open):not(.select--placeholder-visible) .select__display-input {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

/* When multiple + search + open, shrink the input to fit inline with the tags */
.select--multiple.select--search.select--open .select__display-input {
  flex: 1 1 60px;
  min-width: 60px;
  width: auto;
  order: 2;
  margin-inline-start: var(--zn-spacing-2x-small);
}

/* When multiple + search + open, place tags before the input */
.select--multiple.select--search.select--open .select__prefix {
  order: 0;
}

.select--multiple.select--search.select--open .select__tags {
  order: 1;
  flex: 0 1 auto;
}

/* Keep clear button and expand icon at the end */
.select--multiple.select--search.select--open .select__clear {
  order: 4;
}

.select--multiple.select--search.select--open .select__expand-icon {
  order: 5;
}

/* Ensure the combobox wraps so the input flows after tags (only when open to avoid affecting initial size) */
.select--multiple.select--search.select--open .select__combobox {
  flex-wrap: wrap;
  gap: var(--zn-spacing-2x-small);
  padding-inline-start: 0;
}

.select__value-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  z-index: -1;
}

.select__tags {
  display: flex;
  flex: 1;
  align-items: center;
  flex-wrap: wrap;
  margin-inline-start: var(--zn-spacing-2x-small);
}

.select__tags::slotted(zn-chip) {
  cursor: pointer !important;
}

.select--disabled .select__tags,
.select--disabled .select__tags::slotted(zn-chip) {
  cursor: not-allowed !important;
}

/* Standard selects */
.select--standard .select__combobox {
  background-color: var(--zn-input-background-color);
  border: solid var(--zn-input-border-width) var(--zn-input-border-color);
}

.select--standard.select--disabled .select__combobox {
  background-color: var(--zn-input-background-color-disabled);
  border-color: var(--zn-input-border-color-disabled);
  color: var(--zn-input-color-disabled);
  opacity: 0.5;
  cursor: not-allowed;
  outline: none;
}

.select--standard:not(.select--disabled).select--open .select__combobox,
.select--standard:not(.select--disabled).select--focused .select__combobox {
  background-color: var(--zn-input-background-color-focus);
  border-color: var(--zn-input-border-color-focus);
  box-shadow: 0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color);
}

.select--standard:hover:not(.select--disabled) .select__combobox {
  background-color: var(--zn-input-background-color-hover);
  border-color: var(--zn-input-border-color-hover);
}

/* Sizes */
.select--small .select__combobox {
  border-radius: var(--zn-input-border-radius-small);
  font-size: var(--zn-input-font-size-small);
  min-height: var(--zn-input-height-small);
  padding-block: 0;
  padding-inline: var(--zn-input-spacing-small);
}

.select--small .select__clear {
  margin-inline-start: var(--zn-input-spacing-small);
}

.select--small .select__prefix::slotted(*) {
  margin-inline-end: var(--zn-input-spacing-small);
}

.select--small.select--multiple:not(.select--placeholder-visible) .select__combobox {
  padding-block: 2px;
  padding-inline-start: 0;
}

.select--small .select__tags {
  gap: 2px;
}

.select--medium .select__combobox {
  border-radius: var(--zn-input-border-radius-medium);
  font-size: var(--zn-input-font-size-medium);
  min-height: var(--zn-input-height-medium);
  padding-block: 0;
  padding-inline: var(--zn-input-spacing-medium);
}

.select--has-input-prefix.select--medium .select__combobox {
  padding-inline-start: 0;
}

.select--medium .select__clear {
  margin-inline-start: var(--zn-input-spacing-medium);
}

.select--medium .select__prefix::slotted(*) {
  margin-inline-end: var(--zn-input-spacing-medium);
}

.select--medium.select--multiple:not(.select--placeholder-visible) .select__combobox {
  padding-inline-start: 0;
  padding-block: 3px;
}

.select--medium .select__tags {
  gap: 3px;
}

.select--large .select__combobox {
  border-radius: var(--zn-input-border-radius-large);
  font-size: var(--zn-input-font-size-large);
  min-height: var(--zn-input-height-large);
  padding-block: 0;
  padding-inline: var(--zn-input-spacing-large);
}

.select--has-input-prefix.select--large .select__combobox {
  padding-inline-start: 0;
}

.select--large .select__clear {
  margin-inline-start: var(--zn-input-spacing-large);
}

.select--large .select__prefix::slotted(*) {
  margin-inline-end: var(--zn-input-spacing-large);
}

.select--large.select--multiple:not(.select--placeholder-visible) .select__combobox {
  padding-inline-start: 0;
  padding-block: 4px;
}

.select--large .select__tags {
  gap: 4px;
}

/* Pills */
.select--pill.select--small .select__combobox {
  border-radius: var(--zn-input-height-small);
  padding: 0 var(--zn-spacing-large);
}

.select--pill.select--medium .select__combobox {
  border-radius: var(--zn-input-height-medium);
  padding: 0 var(--zn-spacing-large);
}

.select--pill.select--large .select__combobox {
  border-radius: var(--zn-input-height-large);
  padding: 0 var(--zn-spacing-large);
}

/* Prefix */
.select__prefix {
  flex: 0;
  display: inline-flex;
  align-items: center;
  color: var(--zn-input-icon-color);
}

/* When a checkbox is used in the prefix, remove left padding so the prefix joins flush */
.select--has-input-prefix.select--standard .select__combobox {
  padding-inline-start: 0;
}

/* Clear button */
.select__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--zn-font-size-large);
  color: var(--zn-input-icon-color);
  border: none;
  background: none;
  padding: 0;
  transition: var(--zn-transition-fast) color;
  cursor: pointer;

  zn-icon {
    --icon-size: var(--zn-font-size-large);
    --icon-color: var(--zn-input-icon-color);
  }
}

.select__clear:hover {
  color: var(--zn-input-icon-color-hover);
}

.select__clear:focus {
  outline: none;
}

/* Expand icon */
.select__expand-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  transition: var(--zn-transition-medium) rotate ease;
  rotate: 0;
  margin-inline-start: var(--zn-spacing-small);

  zn-icon {
    --icon-size: var(--zn-font-size-large);
    --icon-color: var(--zn-input-icon-color);
  }
}

.select--open .select__expand-icon {
  rotate: -180deg;
}

/* Fetch loading spinner */
.select__spinner {
  animation: spin 1s linear infinite;
  --icon-size: var(--zn-font-size-large);
  --icon-color: var(--zn-input-icon-color);
}

@keyframes spin {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

/* Fetch error icon */
.select__fetch-error-icon {
  --icon-size: var(--zn-font-size-large);
  --icon-color: var(--zn-color-danger-600);
}

/* Listbox */
.select__listbox {
  display: block;
  position: relative;
  font-family: var(--zn-font-sans);
  font-size: var(--zn-font-size-medium);
  font-weight: var(--zn-font-weight-normal);
  box-shadow: var(--zn-shadow-medium);
  background: var(--zn-panel-background-color);
  border: solid var(--zn-panel-border-width) var(--zn-panel-border-color);
  border-radius: var(--zn-border-radius-medium);
  margin: var(--zn-spacing-x-small) 0;
  padding-block: var(--zn-spacing-x-small);
  padding-inline: 0;
  overflow: auto;
  overscroll-behavior: none;

  /* Make sure it adheres to the popup's auto size */
  max-width: var(--auto-size-available-width);
  max-height: min(500px, var(--auto-size-available-height));
}

.select__listbox ::slotted(zn-divider) {
  --spacing: var(--zn-spacing-x-small);
}

.select__listbox ::slotted(small) {
  font-size: var(--zn-font-size-x-small);
  font-weight: var(--zn-font-weight-semibold);
  line-height: var(--zn-line-height-normal);
  letter-spacing: var(--zn-letter-spacing-normal);
  padding-block: var(--zn-spacing-2x-small);
  padding-inline: var(--zn-spacing-2x-large);
  user-select: none;
  -webkit-user-select: none;
}

.select__listbox ::slotted(zn-opt-group) {
  display: block;
}

.select__listbox ::slotted(zn-opt-group[hidden]) {
  display: none;
}

/* Search loading indicator (remote search in-flight) */
.select__search-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--zn-spacing-small);
  padding: var(--zn-spacing-medium) var(--zn-spacing-2x-large);
  color: var(--zn-color-neutral-500);
  font-size: var(--zn-font-size-medium);
}

/* Max results truncation indicator */
.select__max-results-indicator {
  display: block;
  padding: var(--zn-spacing-small) var(--zn-spacing-2x-large);
  text-align: center;
  color: var(--zn-color-neutral-500);
  font-size: var(--zn-font-size-small);
  font-style: italic;
  border-top: solid var(--zn-panel-border-width) var(--zn-panel-border-color);
}

/* Empty state (no search results) */
.select__empty-state {
  display: block;
  padding: var(--zn-spacing-medium) var(--zn-spacing-2x-large);
  text-align: center;
  color: var(--zn-color-neutral-500);
  font-size: var(--zn-font-size-medium);

  &[hidden] {
    display: none;
  }
}

/* Search mode */
.select--search .select__combobox {
  cursor: text;
}

.select--search .select__display-input {
  cursor: text;
}