/* Custom <lens-select> element. */

lens-select glyph,
lens-select .placeholder {
    color: #777;
}

/* Selection */

lens-select .selection {
    display: flex;
    flex-direction: row;
    gap: .1cm;

    padding: .1cm;
    background-color: white;

    line-height: normal;
    font-size: initial;
}

lens-select .selection {
    cursor: pointer;
}

:disabled lens-select .selection,
[disabled="disabled"] lens-select .selection,
lens-select[disabled="disabled"] .selection {
    cursor: not-allowed;
    background-color: #ccc;
}

lens-select .selection > * {
    align-self: center;
}

lens-select .selection glyph {
    font-size: x-small;
}

lens-select .selection .selected {
    flex-grow: 1;
}

lens-select .selection .arrow {
    float: right;
}

lens-select .selection .multi.option {
    display: inline-block;
    font-size: smaller;

    padding: .1cm;
    background-color: #dfebdf;
    border-radius: .1cm;
    margin-right: .1cm;
    margin-bottom: .1cm;
}

/* Dropdown */

.lens-dropdown {
    position: absolute;
    z-index: 9999;

    background: white;
    border: solid 1px #ccc;
    padding: 0;

    overflow-y: scroll;
    -webkit-overflow-scrolling: auto;
}

.lens-dropdown:not(:focus-within) {
    /*
     !!! IMPORTANT !!!
     You can't use "display: none" or "visibility: hidden" to hide the dropdown.
     If you do so, the element WILL NOT BE FOCUSABLE, and it won't open with ":focus-within".
     This is standard DOM behaviour, so there's nothing you can do about it.
     */

    border: none;
    width: 0;
    height: 0;
}

.lens-dropdown:focus-within {
    width: auto;
    height: auto;
}

/* Searchbar */

.lens-dropdown .searchbar {
    display: flex;
    flex-direction: row;
    gap: .2cm;

    width: 100%;

    padding: .1cm .2cm;
    margin-bottom: 0;
    background-color: white;
}

.lens-dropdown .searchbar > * {
    align-self: center;
}

.lens-dropdown .searchbar input[type="search"] {
    flex-grow: 1;

    color: #666;
    border: solid 1px #aaa;
    border-radius: .2cm;
}

/* Options */

.lens-dropdown .options {
    list-style: none;
    max-height: 8cm;

    padding: 0;
    margin: 0;
}

.lens-dropdown ul.options li {
    padding: .1cm;
}

.lens-dropdown ul.options li:hover {
    cursor: pointer;
    background-color: #ebdfeb;
}

.lens-dropdown ul.options li.selected {
    background-color: #dfebdf;
}