cd-ui/v2/components/autocomplete/autocomplete.scss

@import '../../styles/colors.scss';

.autocomplete {
    min-width: 0;
    position: relative;
    box-sizing: border-box;
    $autocompleteClass: &;

    &__items {
        z-index: 3;
        position: fixed;
        white-space: nowrap;
        max-height: 12em;
        overflow-y: auto;
        border-radius: 3px;
        background-color: white;
        border: 1px solid $argo-color-gray-4;
        padding: 10px;
        font-family: 'Heebo', sans-serif;
        box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.05);
        line-height: 0.5em;

        &__item {
            z-index: 2;
            padding: 0.75em 0;
            padding-right: 30px;
            padding-left: 5px;
            cursor: pointer;
            border-bottom: 1px solid $argo-color-gray-4;
            box-sizing: border-box;

            &:hover,
            &--selected {
                border-radius: 3px;
            }

            &:hover {
                background-color: $argo-color-gray-3;
            }

            &--selected {
                background-color: $argo-color-teal-3;
            }
        }

        &--dark {
            background-color: $space;
            border: 1px solid $silver-lining;
            box-shadow: 1px 2px 3px 1px $space;
            color: $shine;

            #{$autocompleteClass}__items__item {
                border-bottom: 1px solid $silver-lining;
            }
        }
    }
}