@ozen-ui/kit/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/AutocompleteBaseInput.css

React component library

.AutocompleteBaseInput {
  --autocomplete-base-input-gutter-x: 0 var(--textfield-gutter-x);
}

  .AutocompleteBaseInput_hasChevron.AutocompleteBaseInput_size_2xs {
      --autocomplete-base-input-gutter-x: 0 var(--control-padding-2xs) 0
      var(--control-padding-xs);
    }

  .AutocompleteBaseInput_hasChevron.AutocompleteBaseInput_size_xs {
      --autocomplete-base-input-gutter-x: 0 var(--control-padding-2xs) 0
      var(--control-padding-xs);
    }

  .AutocompleteBaseInput_hasChevron.AutocompleteBaseInput_size_s {
      --autocomplete-base-input-gutter-x: 0 var(--control-padding-2xs) 0
      var(--control-padding-s);
    }

  .AutocompleteBaseInput_hasChevron.AutocompleteBaseInput_size_m {
      --autocomplete-base-input-gutter-x: 0 var(--control-padding-2xs) 0
      var(--control-padding-m);
    }

  .AutocompleteBaseInput_hasChevron.AutocompleteBaseInput_size_l {
      --autocomplete-base-input-gutter-x: 0 var(--control-padding-2xs) 0
      var(--control-padding-l);
    }

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

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

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

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

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

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

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

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

  .AutocompleteBaseInput-ClearButton_visibility {
      visibility: visible;
    }


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


/* ToDo. Tag */


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


.AutocompleteBaseInput-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);
  }


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


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


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