:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host {
  /**
   * @prop --bg: default background color. Defaults to none;
   * @prop --bg-selected: background color when selected. Defaults to var(--nano-color-blue-cerulean-1000);
   * @prop --bg-focus: background color when focused. Defaults to var(--nano-color-primary-300);
   * @prop --bg-disabled: background color when disabled. Defaults to none;
   * @prop --color: default text color. Defaults to var(--nano-color-base-1000);
   * @prop --color-selected: text color when selected. Defaults to var(--nano-color-basic-white);
   * @prop --color-focus: text color when focused. Defaults to var(--nano-color-base-1000);
   * @prop --color-disabled: text color when disabled. Defaults to var(--nano-color-neutral-300);
   * @prop --opt-icon-size: Sizes all icons within the option. Defaults to 1em;

   * @prop --color: default text color. Defaults to var(--nano-color-base-1000);
   * @prop --color-selected: text color when selected. Defaults to var(--nano-color-basic-white);
   * @prop --color-focus: text color when focused. Defaults to var(--nano-color-base-1000);
   * @prop --color-disabled: text color when disabled. Defaults to var(--nano-color-neutral-300);

   * @prop --opt-icon-size: Sizes all icons within the option. Defaults to 1em;
   */
  --bg: none;
  --bg-selected: none;
  --bg-focus: var(--nano-color-blue-cerulean-1000);
  --bg-disabled: none;
  --color: var(--nano-color-base-1000);
  --color-selected: var(--nano-color-base-1000);
  --color-focus: var(--nano-color-base-0);
  --color-disabled: var(--nano-color-neutral-400);
  --opt-icon-size: 1em;
  --padding-start: var(--nano-spacing-sm);
  --padding-end: var(--nano-spacing-md);
  --padding-bottom: 6px;
  --padding-top: 6px;
  display: block;
  color: var(--color);
  overflow: hidden;
  font-size: var(--nano-font-size-xs);
}

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

.option {
  color: inherit;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none;
          user-select: none;
  cursor: pointer;
  display: flex;
  align-items: stretch;
  inline-size: 100%;
  background: var(--bg);
  padding-inline: var(--padding-start) var(--padding-end);
  padding-block: var(--padding-top) var(--padding-bottom);
}
:host(:focus) .option:not(.option--disabled), :host .option.option--selected {
  outline: none;
  background: var(--bg-selected);
  color: var(--color-selected);
}
:host(:focus) .option:not(.option--disabled) {
  background: var(--bg-focus);
  color: var(--color-focus);
}
.option.option--disabled {
  outline: none;
  color: var(--color-disabled);
  cursor: not-allowed;
  background: var(--bg-disabled);
}
.option.option--novalue {
  font-style: italic;
  opacity: 0.7;
}
.option__label {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}
.option__start {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.option__start ::slotted(.nano-icon) {
  font-size: var(--opt-icon-size);
  margin-inline-end: var(--padding-end);
}
.option__end {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.option__end ::slotted(.nano-icon) {
  font-size: var(--opt-icon-size);
}
.option__end ::slotted(:first-child) {
  margin-inline-start: var(--padding-start);
}
.option__check {
  visibility: hidden;
  display: flex;
  margin-inline-end: var(--padding-start);
  align-items: center;
  font-size: var(--nano-font-size-2xs);
  inline-size: var(--nano-font-size-2xs);
}
.option--selected:not(.option--novalue) .option__check {
  visibility: visible;
}