@use "../../wc";

:host {
  display: block;
  user-select: none;
  -webkit-user-select: none;
}

:host([hidden]) {
  display: none !important;
}

:host(:focus) {
  outline: none;
}

.option {
  position: relative;
  display: flex;
  align-items: center;
  font-family: var(--zn-font-sans);
  font-size: var(--zn-font-size-medium);
  font-weight: var(--zn-font-weight-normal);
  line-height: var(--zn-line-height-normal);
  letter-spacing: var(--zn-letter-spacing-normal);
  color: var(--zn-input-color);
  padding: var(--zn-spacing-x-small) var(--zn-spacing-small);
  transition: var(--zn-transition-fast) fill;
  cursor: pointer;
}


.option--hover:not(.option--current):not(.option--disabled) {
  background-color: var(--zn-color-primary-100);
  color: var(--zn-input-color);
}

.option--current,
.option--current.option--disabled {
  background-color: var(--zn-color-primary-100);
  color: var(--zn-input-color);
  opacity: 1;
}

.option--disabled {
  outline: none;
  opacity: 0.5;
  cursor: not-allowed;
}

.option__label {
  flex: 1 1 auto;
  display: inline-block;
  font-size: var(--zn-font-size-small);
  line-height: var(--ts-leading-5);
}

.option .option__check {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  padding-inline-start: 0.375rem;
  padding-inline-end: 0.375rem;
}

.option--selected .option__check {
  visibility: visible;
}

.option--selected {
  background-color: var(--zn-color-primary-200);
}

.option__prefix,
.option__suffix {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.option__prefix::slotted(*) {
  margin-inline-end: var(--zn-spacing-small);
  font-size: var(--zn-font-size-large);
}

.option__suffix::slotted(*) {
  margin-inline-start: var(--zn-spacing-small);
}

@media (forced-colors: active) {
  :host(:hover:not([aria-disabled='true'])) .option {
    outline: dashed 1px SelectedItem;
    outline-offset: -1px;
  }
}