@ozen-ui/kit/__inner__/esm/components/AutocompleteNext/Autocomplete.css

React component library

.AutocompleteNext {
  --autocomplete-gutter-x: 0 var(--textfield-gutter-x);
}

  .AutocompleteNext_hasChevron.AutocompleteNext_size_2xs {
      --autocomplete-gutter-x: 0 var(--control-padding-2xs) 0
        var(--control-padding-xs);
    }

  .AutocompleteNext_hasChevron.AutocompleteNext_size_xs {
      --autocomplete-gutter-x: 0 var(--control-padding-2xs) 0
        var(--control-padding-xs);
    }

  .AutocompleteNext_hasChevron.AutocompleteNext_size_s {
      --autocomplete-gutter-x: 0 var(--control-padding-2xs) 0
        var(--control-padding-s);
    }

  .AutocompleteNext_hasChevron.AutocompleteNext_size_m {
      --autocomplete-gutter-x: 0 var(--control-padding-2xs) 0
        var(--control-padding-m);
    }

  .AutocompleteNext_hasChevron.AutocompleteNext_size_l {
      --autocomplete-gutter-x: 0 var(--control-padding-2xs) 0
        var(--control-padding-l);
    }

  .AutocompleteNext-RenderRight {
    display: flex;
    gap: var(--spacing-2xs);
    align-items: center;
  }

  .AutocompleteNext-ClearButton {
    visibility: hidden;
    transition: visibility var(--transition-default);
  }

  .AutocompleteNext-ClearButton_visibility {
      visibility: visible;
    }

  .AutocompleteNext .Input-Body {
    padding: var(--autocomplete-gutter-x);
    align-items: flex-start;
  }

  .AutocompleteNext .FieldIcon {
    block-size: var(--textfield-input-height);
  }

  .AutocompleteNext-Option {
    cursor: pointer;
    transition: background-color var(--transition-default);
  }

  .AutocompleteNext-Option:hover {
      background-color: var(--color-background-main-hover);
    }

  .AutocompleteNext-Option:active {
      background-color: var(--color-background-main-pressed);
    }

  .AutocompleteNext-Option_focused {
      box-shadow: inset var(--shadow-outline-focused);
    }

  .AutocompleteNext-Option_disabled,
    .AutocompleteNext-Option_disabled:hover,
    .AutocompleteNext-Option_disabled:active {
      cursor: not-allowed;
      background-color: unset;
    }

  .AutocompleteNext-Option_disabled .ListItemText-TextPrimary,
      .AutocompleteNext-Option_disabled .ListItemText-TextSecondary,
      .AutocompleteNext-Option_disabled:hover .ListItemText-TextPrimary,
      .AutocompleteNext-Option_disabled:hover .ListItemText-TextSecondary,
      .AutocompleteNext-Option_disabled:active .ListItemText-TextPrimary,
      .AutocompleteNext-Option_disabled:active .ListItemText-TextSecondary {
        color: var(--color-content-tertiary);
      }

  .AutocompleteNext-Input_multiple {
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      inline-size: 100%;
      align-items: center;
      box-sizing: border-box;
      padding: var(--textfield-input-padding);
      min-block-size: var(--textfield-input-height);
      gap: var(--spacing-3xs);
    }

  .AutocompleteNext-Input_multiple input {
        padding: 0;
        border: none;
        outline: none;
        font: inherit;
        background: none;
        box-sizing: border-box;
        color: var(--textfield-color);
      }

  .AutocompleteNext-Input_multiple.AutocompleteNext-Input_hasLabel input::placeholder {
        opacity: 0;
      }

  .AutocompleteNext-Input_multiple * + input::placeholder, .AutocompleteNext-Input_multiple input:focus::placeholder, .AutocompleteNext-Input_multiple.AutocompleteNext-Input_hasLabel * + input::placeholder, .AutocompleteNext-Input_multiple.AutocompleteNext-Input_hasLabel input:focus::placeholder {
          opacity: 1;
        }

  .AutocompleteNext-Input_responsive {
      flex-wrap: nowrap;
      gap: unset;
    }

  .AutocompleteNext-Input_responsive .AutocompleteNext-Tag {
        margin-inline-end: var(--spacing-3xs);
      }

  .AutocompleteNext-HelperInput {
    inset-block-start: 0;
    block-size: 0;
    overflow: hidden;
    position: absolute;
    visibility: hidden;
    white-space: nowrap;
  }

  .AutocompleteNext-Tag_hidden {
      inset-block-start: 0;
      block-size: 0;
      visibility: hidden;
      position: absolute;
    }

  .AutocompleteNext-Tag_disabled {
      pointer-events: none;
      opacity: 0.6;
    }

  .AutocompleteNext-ClearTag {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    block-size: inherit;
  }

  .AutocompleteNext-Dropdown {
    --scroll-bar-size: 12px;
  }

  .AutocompleteNext-Dropdown::-webkit-scrollbar {
    inline-size: var(--scroll-bar-size);
  }

  .AutocompleteNext-Dropdown::-webkit-scrollbar-thumb {
    background-color: var(--color-background-secondary);
    border-radius: calc(var(--scroll-bar-size) / 2);
    border: calc(var(--scroll-bar-size) / 4) solid transparent;
    background-clip: padding-box;
    border-image: initial;
    min-block-size: 24px;
  }

  .AutocompleteNext-Dropdown::-webkit-scrollbar-thumb:hover,
    .AutocompleteNext-Dropdown::-webkit-scrollbar-thumb:active {
      border: calc(var(--scroll-bar-size) / 4) solid transparent;
      background-clip: padding-box;
    }

  .AutocompleteNext-Dropdown::-webkit-scrollbar-thumb:hover {
      background-color: var(--color-background-secondary-hover);
    }

  .AutocompleteNext-Dropdown::-webkit-scrollbar-thumb:active {
      background-color: var(--color-background-secondary-pressed);
    }

  .AutocompleteNext-Dropdown::-webkit-scrollbar-corner {
    background: transparent;
  }

  .AutocompleteNext-Dropdown {
    overflow: hidden auto;
    max-block-size: 40vh;
}
.AutocompleteNext-Dropdown-animation-enter {
    opacity: 0;
    transform: translate(0, calc(var(--spacing-2xs) * -1));
    pointer-events: none;
  }
.AutocompleteNext-Dropdown-animation-enter-active {
    opacity: 1;
    transition:
      opacity var(--transition-default),
      transform var(--transition-default);
    transform: translate(0);
    pointer-events: none;
  }
.AutocompleteNext-Dropdown-animation-enter-done {
    opacity: 1;
    transform: translate(0);
  }
.AutocompleteNext-Dropdown-animation-exit {
    opacity: 1;
    transform: translate(0);
    pointer-events: none;
  }
.AutocompleteNext-Dropdown-animation-exit-active {
    opacity: 0;
    transition:
      opacity var(--transition-default),
      transform var(--transition-default);
    transform: translate(0, calc(var(--spacing-2xs) * -1));
    pointer-events: none;
  }
.AutocompleteNext-Dropdown-animation-exit-done {
    opacity: 0;
    transform: translate(0, calc(var(--spacing-2xs) * -1));
    pointer-events: none;
  }