@layer atoms {
  .mobius-combobox {
    interpolate-size: allow-keywords;
    position: relative;
    width: 100%;
  }

  /* Override prefix icon position for animation */
  .mobius-text-field__input-wrapper.mobius-combobox__input {
    padding-left: var(--size-sm);

    & .mobius-text-field__prefix-inside {
      padding-left: 0;
    }
  }

  .mobius-combobox__list {
    --animation-duration: 0.1s;
    position: absolute;
    margin: 0;
    margin-top: var(--listbox-gap);
    padding: 0;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: #fff;
    border: 1px solid var(--combobox-border-color);
    border-radius: var(--radius-1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    height: 0;
    opacity: 0;
    transition:
      box-shadow var(--animation-duration) ease,
      height var(--animation-duration) ease,
      opacity var(--animation-duration) ease;
    transition-behavior: allow-discrete;

    .mobius-combobox--is-expanded & {
      opacity: 1;
      height: var(--listbox-height);
      max-height: var(--listbox-max-height);
    }

    .mobius-combobox--is-expanded.mobius-combobox--is-mobile & {
      max-height: var(--listbox-max-height-mobile);
    }

    /* Hidden state for accessibility - keeps listbox in DOM but invisible */
    &.mobius-combobox__list--hidden {
      visibility: hidden;
      height: 0;
      opacity: 0;
    }
  }

  .mobius-combobox__no-options {
    padding: var(--option-padding);
    text-align: center;
  }

  .mobius-combobox__option {
    padding: var(--option-padding);
    cursor: pointer;
    margin: 2px;
    border: solid 2px transparent;
    border-radius: var(--radius-1);
  }

  .mobius-combobox__option:hover {
    background-color: var(--color-primary);
    color: var(--color-neutral-100);
  }

  .mobius-combobox__option--is-highlighted {
    border-color: var(--color-focus);
  }

  /* Group styles */
  [role="group"] {
    margin: 0;
    padding: 0;
  }

  [role="group"] > [role="presentation"] {
    display: block;
    margin: 0;
    padding: var(--option-padding);
    font-weight: bold;
    color: var(--combobox-group-color);
    background-color: var(--combobox-group-background-color);
  }

  [role="option"] {
    position: relative;
    display: block;
    cursor: pointer;
  }

  .mobius-combobox--is-loading input {
    background-image: url("./loading-dots.svg");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 32px;
  }

  /* Pulse animation on focus ring */
  /*
  .mobius-combobox--is-loading .mobius-text-field__input-wrapper {
    animation: pulse-animation 2s infinite;
  }
  */
}
