.autocomplete {
    --autocomplete-input-height: 40px;
    position: relative;
    display: grid;
    gap: 4px;
}

.autocomplete input[data-autocomplete-input] {
    min-height: var(--autocomplete-input-height);
    padding-right: 62px;
}

.autocomplete-actions {
    position: absolute;
    top: 1px;
    right: 1px;
    display: flex;
    align-items: center;
    height: calc(var(--autocomplete-input-height) - 2px);
}

.autocomplete-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 100%;
    border: 0;
    background: transparent;
    color: #6c7787;
    cursor: pointer;
}

.autocomplete-action:hover {
    color: #1d4f78;
}

.autocomplete-clear {
    color: #8b96a6;
}

.autocomplete-clear[hidden] {
    display: none;
}

.autocomplete-action::before {
    content: "";
    width: 16px;
    height: 16px;
    background: currentColor;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 16px 16px;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 16px 16px;
}

.autocomplete-clear::before {
    mask-image: url("/res/icons/ui/x.svg");
    -webkit-mask-image: url("/res/icons/ui/x.svg");
}

.autocomplete-toggle::before {
    mask-image: url("/res/icons/ui/chevron-down.svg");
    -webkit-mask-image: url("/res/icons/ui/chevron-down.svg");
    transition: transform 140ms ease;
}

.autocomplete.is-open input[data-autocomplete-input] {
    border-color: var(--control-border-hover, #82a9c8);
    box-shadow: none;
    outline: none;
}

.autocomplete.is-open::before {
    content: "";
    position: absolute;
    left: -3px;
    right: -3px;
    top: calc(var(--autocomplete-ring-top, 0px) - 3px);
    height: calc(var(--autocomplete-ring-height, var(--autocomplete-input-height)) + 6px);
    z-index: var(--z-local-overlay, 10);
    border-radius: calc(var(--form-control-radius, var(--radius-sm, 5px)) + 2px);
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(23, 105, 168, 0.22));
    pointer-events: none;
}

.autocomplete.is-open-below input[data-autocomplete-input] {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.autocomplete.is-open-above input[data-autocomplete-input] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.autocomplete.is-open .autocomplete-toggle::before {
    transform: rotate(180deg);
}

.autocomplete-panel {
    position: absolute;
    z-index: var(--z-local-popover, 20);
    left: 0;
    right: 0;
    overflow: hidden;
    overflow-y: auto;
    border: 1px solid var(--control-border-hover, #82a9c8);
    background: #fff;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
}

.autocomplete.is-open-below .autocomplete-panel {
    border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px);
}

.autocomplete.is-open-above .autocomplete-panel {
    border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0;
    box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.16);
}

.autocomplete-option {
    width: 100%;
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid #edf1f5;
    background: #fff;
    color: #17202c;
    cursor: pointer;
    text-align: left;
}

.autocomplete-option:last-child {
    border-bottom: 0;
}

.autocomplete-option strong {
    font-size: var(--font-md, 1rem);
    font-weight: 700;
}

.autocomplete-option span {
    color: #687385;
    font-size: var(--font-sm, 0.86rem);
}

.autocomplete-option:hover,
.autocomplete-option.is-active {
    background: var(--hover-bg, #eaf3fb);
}

.autocomplete-option--custom {
    border-top: 1px solid #dfe7ef;
    background: #fbfdff;
}

.autocomplete-state {
    padding: 12px;
    color: #687385;
    font-size: var(--font-md, 1rem);
}

.autocomplete-message {
    color: #b42318;
    font-size: var(--font-sm, 0.86rem);
    font-weight: 600;
    line-height: 1.25;
}

.autocomplete-message:empty {
    display: none;
}

.autocomplete.is-invalid input[data-autocomplete-input] {
    border-color: var(--form-control-invalid-border, #d94a3f);
    background: var(--form-control-invalid-bg, #fffafa);
    box-shadow: var(--form-control-invalid-ring, 0 0 0 1px rgba(217, 74, 63, 0.12));
}

.autocomplete--overlay-search {
    --autocomplete-overlay-font-size: var(--font-md, 1rem);
    --autocomplete-overlay-font-weight: 650;
    --autocomplete-overlay-panel-font-size: var(--font-md, 1rem);
    --autocomplete-overlay-panel-font-weight: 650;
}

.autocomplete--overlay-search input[data-autocomplete-input] {
    padding-left: 8px;
    border: 1px solid #b9d3df00;
    border-bottom: 2px solid var(--control-border-hover);
    background: rgba(255, 255, 255, 0.7);
    color: var(--text);
    font-size: var(--autocomplete-overlay-font-size);
    font-weight: var(--autocomplete-overlay-font-weight);
}

.autocomplete--overlay-search input[data-autocomplete-input]::placeholder {
    color: var(--form-placeholder-text);
    font-size: var(--autocomplete-overlay-font-size);
    font-weight: var(--form-placeholder-weight);
    opacity: 1;
}

.autocomplete--overlay-search input[data-autocomplete-input]:focus,
.autocomplete--overlay-search.is-open input[data-autocomplete-input] {
    border-color: #8aaecb;
    background: #fff;
}

.autocomplete--overlay-search .autocomplete-state,
.autocomplete--overlay-search .autocomplete-message {
    color: var(--muted);
    font-size: var(--autocomplete-overlay-panel-font-size);
    font-weight: var(--autocomplete-overlay-panel-font-weight);
}

.autocomplete--overlay-search.is-invalid .autocomplete-message {
    color: #b42318;
}