espocrm-base/frontend/less/espo/elements/dropdown.less

.autocomplete-suggestions {
    border: var(--dropdown-border-width) solid var(--dropdown-border);
    background-color: var(--dropdown-bg);
    color: var(--dropdown-link-color);
    cursor: default;
    overflow: auto;
    padding: var(--5px) 0;
    user-select: none;

    .autocomplete-suggestion.autocomplete-selected {
        background-color: var(--dropdown-link-hover-bg) !important;
        color: var(--dropdown-link-hover-color) !important;
    }

    strong {
        font-weight: normal;
        color: @brand-primary;
    }

    .autocomplete-suggestion {
        padding: var(--4px) var(--10px);
        white-space: nowrap;
        overflow: hidden;

        a {
            &:hover {
                text-decoration: none;
            }
        }
    }
}

.popover,
.dropdown-menu,
.selectize-dropdown,
.selectize-dropdown.form-control,
.autocomplete-suggestions,
.ui-timepicker-wrapper {
    .dropdown-border();
}

// Separately intentionally as this one is not supported in FF.
select.form-control::picker(select) {
    .dropdown-border();
}

.popover {
    background-color: var(--dropdown-bg);

    &.bottom > .arrow {
        border-bottom-color: var(--dropdown-border);
    }
    &.top > .arrow {
        border-top-color: var(--dropdown-border);
    }
    &.left > .arrow {
        border-left-color: var(--dropdown-border);
    }
    &.right > .arrow {
        border-right-color: var(--dropdown-border);
    }
}

.ui-timepicker-wrapper {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

ul.dropdown-menu > li.checkbox {
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding: var(--4px) 0 var(--4px) var(--20px);

    user-select: none;

    label {
        padding-left: var(--23px);

        input[type="checkbox"].form-checkbox {
            margin-left: calc(var(--23px) * -1);

            &.form-checkbox-small {
                margin-top: var(--3px);
            }
        }
    }
}

ul.dropdown-menu {
    > li > a {
        padding-top: var(--4px);
        padding-bottom: var(--4px);

        -webkit-user-select: none;
        -webkit-user-drag: none;
        -moz-user-select: none;
        user-select: none;
        line-height: var(--line-height-computed);

        &.active {
            background-color: var(--dropdown-link-active-bg);
            text-decoration: none;
            outline: 0;
        }

        > .check-icon + div {
            padding-right: var(--26px);
        }

        span.fa-check {
            position: relative;
            top: var(--1px);

            + div {
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                vertical-align: top;
                max-width: 100%;
            }
        }

        &.disabled {
            color: var(--text-muted-color);
        }

        &:not(:has(.check-icon)) {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        > div {
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    > li.checkbox:last-child {
        margin-bottom: var(--3px);
    }

    > .dropdown-header {
        user-select: none;
    }
}

ul.dropdown-menu-with-icons {
    > li {
        a {
            padding-left: var(--10px);
        }

        .fas, .far, .glyphicon, .empty-icon {
            width: var(--16px);
            text-align: center;
            display: inline-block;
            color: var(--gray-soft);
        }

        .item-text {
            padding-left: var(--8px);
            position: static;
        }
    }
}

ul.dropdown-menu {
    > li {
        a {
            .item-icon + .item-text {
                padding-left: var(--8px);
            }
        }
    }

    > li {
        .item-icon-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(var(--34px), 1fr));

            > a {
                padding: var(--4px) var(--4px);
                text-align: center;

                &:hover {
                    background-color: var(--dropdown-link-hover-bg);
                }
            }
        }

    }
}

.btn-group.open .dropdown-toggle {
    &.btn-text {
        box-shadow: none;
    }
}

.btn.dropdown-toggle > span.caret.wide {
    margin-left: var(--2px);
    margin-right: var(--2px);
}

/*.fix-position {
    .btn-group {
        position: unset;
    }
}*/

.dropdown-menu {
    .quick-search-list-item {
        input {
            border-left: 0;
            border-right: 0;
            border-radius: 0;
        }
    }
}

@media screen and (max-width: @screen-xs-max) {
    ul.dropdown-menu {
        max-width: 100vw;
    }
}

ul.dropdown-menu {
    > li.divider:first-child {
        display: none;
    }

    > li.divider:last-child {
        display: none;
    }

    > li.divider + li.divider {
        display: none;
    }

    > li.divider:not(.hidden)  + li.hidden + li.divider {
        display: none;
    }

    > li.divider:not(.hidden)  + li.hidden + li.hidden + li.divider {
        display: none;
    }

    > li.divider:not(.hidden)  + li.hidden + li.hidden + li.hidden + li.divider {
        display: none;
    }

    > li.divider:not(.hidden)  + li.hidden + li.hidden + li.hidden + li.hidden + li.divider {
        display: none;
    }

    > li.divider:not(.hidden)  + li.hidden + li.hidden + li.hidden + li.hidden + li.hidden + li.divider {
        display: none;
    }

    > li.divider:not(.hidden) + li.hidden + li.hidden + li.hidden + li.hidden + li.hidden + li.hidden + li.divider {
        display: none;
    }

    > li.hidden:first-child + li.divider {
        display: none;
    }

    > li.hidden:first-child + li.hidden + li.divider {
        display: none;
    }

    > li.hidden:first-child + li.hidden + li.hidden + li.divider {
        display: none;
    }

    > li.hidden:first-child + li.hidden + li.hidden + li.hidden + li.divider {
        display: none;
    }

    > li.hidden:first-child + li.hidden + li.hidden + li.hidden + li.hidden + li.divider {
        display: none;
    }

    > li.hidden:first-child + li.hidden + li.hidden + li.hidden + li.hidden + li.hidden + li.divider {
        display: none;
    }

    > li.divider:has(+ li.hidden:last-child) {
        display: none;
    }

    > li.divider:has(+ li.hidden + li.hidden:last-child) {
        display: none;
    }

    > li.divider:has(+ li.hidden + li.hidden + li.hidden:last-child) {
        display: none;
    }

    > li.divider:has(+ li.hidden + li.hidden + li.hidden + li.hidden:last-child) {
        display: none;
    }

    > li.divider:has(+ li.hidden + li.hidden + li.hidden + li.hidden + li.hidden:last-child) {
        display: none;
    }

    > li.divider:has(+ li.hidden + li.hidden + li.hidden + li.hidden + li.hidden + li.hidden:last-child) {
        display: none;
    }
}

.textcomplete-dropdown {
    .textcomplete-item {
        > span {
            display: block;
            cursor: pointer;
            padding: var(--4px) var(--20px);
            overflow: hidden;
            text-overflow: ellipsis;

            img.avatar {
                margin-right: var(--5px);
            }
        }

        &:hover {
            > span {
                background-color: var(--dropdown-link-hover-bg);
            }
        }
    }

    &:not(:has(> li:hover)) {
        .textcomplete-item {
            &.active {
                background-color: var(--gray-lighter);
            }
        }
    }
}