/**
 * 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);
    --jkl-autosuggest-option-height: min(var(--jkl-unit-60), 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: var(--jkl-text-style-text-small);
    color: var(--jkl-color-text-subdued);
  }
  .jkl-autosuggest__menu {
    background-color: var(--jkl-color-background-container);
    border: 0.125rem solid var(--jkl-color-border-strong);
    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: var(--jkl-text-style-text-small);
    color: unset;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border: 0;
    background-color: transparent;
    min-height: var(--jkl-autosuggest-option-height);
    text-align: left;
    transition-timing-function: var(--jkl-motion-easing-standard);
    transition-duration: var(--jkl-motion-timing-productive);
    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-container-accent);
  }
}