/**
 * Do not edit directly, this file was auto-generated.
 */
@layer jokul.components {
  .jkl-autosuggest {
    --border-radius: var(--jkl-border-radius-s);
    --jkl-autosuggest-menu-padding: var(--jkl-unit-20) var(--jkl-unit-10) 0;
    --jkl-autosuggest-controller-button-width: auto;
    --jkl-autosuggest-controller-button-padding: 0 var(--jkl-unit-15);
    --jkl-autosuggest-controller-button-icon-size: 1.25rem;
    --jkl-autosuggest-option-padding: var(--jkl-unit-10) 0.75em;
    --jkl-autosuggest-option-height: 3rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }
  .jkl-autosuggest[aria-expanded=true] .jkl-text-input-wrapper {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
  }
  .jkl-autosuggest__no-hits-message {
    padding: var(--jkl-autosuggest-option-padding);
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    color: var(--jkl-color-text-subdued);
  }
  .jkl-autosuggest__menu {
    background-color: var(--jkl-color-background-container-high);
    border: 0.125rem solid var(--jkl-color-border-input-focus);
    border-top: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    box-sizing: border-box;
    position: absolute;
    inset: 100% -0.0625rem auto;
    margin: 0;
    padding: 0;
    max-height: 60vh;
    overflow-y: auto;
    width: calc(100% + 0.125rem);
    z-index: 7000;
    -webkit-overflow-scrolling: touch;
  }
  .jkl-autosuggest__item-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  .jkl-autosuggest__item {
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    color: unset;
    display: flex;
    align-items: center;
    border: 0;
    background-color: var(--jkl-color-background-interactive);
    min-height: var(--jkl-autosuggest-option-height);
    text-align: left;
    transition-timing-function: ease;
    transition-duration: 150ms;
    transition-property: color, background-color;
    position: relative;
    padding: var(--jkl-autosuggest-option-padding);
    cursor: pointer;
  }
  .jkl-autosuggest__item:focus, .jkl-autosuggest__item--active, .jkl-autosuggest__item:hover {
    color: var(--jkl-color-text-default);
    background-color: var(--jkl-color-background-interactive-hover);
  }
}