@use '../../../../styles';

@layer components {
    .autocomplete {
        position: relative;

        .autocomplete__dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            margin-top: 4px;
            background-color: #fff;
            padding: 0;
            border-radius: 4px;
            box-shadow: 0 2px 1px -1px rgba(#000, .2),
            0 1px 1px 0px rgba(#000, .14),
            0 1px 3px 0px rgba(#000, .12);
            z-index: 100;
        }

        .autocomplete__list {
            padding: 8px 0;
            max-height: 40vh;
            overscroll-behavior: contain;
            overflow: auto;
            list-style: none;
        }

        .autocomplete__list-item {
            @include styles.ellipsis;
            font-size: 16px;
            line-height: 24px;
            padding: 6px 16px;
            cursor: pointer;

            &:hover,
            &._focused {
                background-color: rgba(#000, .04);
            }
        }
    }
}
