/* Додаткові стилі які мжливо треба розмістити за межами прихованого дому

    Для зміни кольору тексту виділеної опції та виділеного тексту 
multiple-select {
    --ms-selection-color: white;
    --ms-selection-color-background: black;
    --ms-selected-opt-background: black;
    --ms-selected-opt-color: white;
}
    Для того щоб прибрати блимання опцій до створення внутрішнього дому
    Внутрішні стилі перевизначають цю властивість після створення дому
ms-option{
    display:none;
}

*/
.streach-box {
    visibility: hidden;
    line-height:.1rem;
    /*display: none;*/
}
ms-option, ::slotted(ms-option), i {
    cursor: pointer;
    padding: .2em;
}
option, ::slotted(option), i {
    cursor: pointer;
    padding: .2em;
}

.body {
    flex: 1 1 auto;
    color: #292b2c;
    background: #ffffff;
    min-width: 10rem;
    overflow: auto;
    z-index: 1;
    padding: .2em;
    display: flex;
    flex-direction: column;
}

.count-container::selection {
    color: var(--ms-selection-color, #292b2c);
    background: var(--ms-selection-color-background, #ffffff);
}

.count-selected::selection {
    color: var(--ms-selection-color, #292b2c);
    background: var(--ms-selection-color-background, #ffffff);
}

:host ms-option {
    display: block;
}

:host option {
    display: block;
}

:host {
    margin-left: 1rem;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    background-color: white;
    height: 2em;
    display: flex;
    flex-direction: column;
    font-family: inherit;
    font-size: 13.3333px;
    margin: 0;
    min-width: 10rem;
    overflow: hidden;
    border: 1px solid #cccccc;
    transition: box-shadow 0.3s, border-color 0.3s;
    border-radius: 4px;
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
    padding: 0 !important;
}

    :host:invalid {
        border: 1px solid red;
        color: red;
    }

::slotted(select[slot="hiddenS"]) {
    max-height: 10px;
    background-color: white;
    z-index: -1;
    position: absolute;
    opacity: 0;
}

::slotted(ms-option) {
    display: flex !important;
    border: 1px solid transparent;
}

::slotted(option) {
    display: flex !important;
    border: 1px solid transparent;
}

::slotted(ms-option.display-none-loc) {
    display: none !important;
}

::slotted(option.display-none-loc) {
    display: none !important;
}

.display-none-loc {
    display: none !important;
}

::slotted(ms-option[value=""]) {
    min-height: 1rem;
}

::slotted(ms-option[value="null"]) {
    min-height: 1rem;
}

::slotted(option[value=""]) {
    min-height: 1rem;
}

::slotted(ms-option:hover) {
    border-radius: .2rem;
    border: .1px solid black;
}

::slotted(option:hover) {
    border-radius: .2rem;
    border: .1px solid black;
}

::slotted(ms-option[selected="selected"]) {
    background-color: var(--ms-selected-opt-background, #47629b);
    border-radius: .2rem;
    color: var(--ms-selected-opt-color, white);
}

::slotted(option[selected="selected"]) {
    background-color: var(--ms-selected-opt-background, #47629b);
    border-radius: .2rem;
    color: var(--ms-selected-opt-color, white);
}

.expanded {
    position: absolute;
    resize: both;
    border: 1px solid #cccccc;
    transition: box-shadow 0.3s, border-color 0.3s;
    border-radius: 4px;
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
    overflow: auto !important;
    z-index: 2;
    max-height: 80vh;
    max-width: 80vw;
}

    .expanded .options {
        display: flex;
        flex-direction: column;
    }

    .expanded .search-row {
        display: flex;
    }

.count-container {
    flex: 0 0 auto;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding: .2em;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.count-icon {
    padding: 0;
}

.selected-text {
    flex: 1 1 auto;
    /*padding: .2em;*/
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    min-height:1rem;
    /*transform: translateY(17%);*/
}

    .selected-text::selection {
        color: var(--ms-selection-color, #292b2c);
        background: var(--ms-selection-color-background, #ffffff);
    }

.overhidden {
    overflow: hidden;
}

.options {
    flex: 100 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
}

.header {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    color: inherit;
    background: inherit;
}

.expander {
    display: flex !important;
    align-items: center;
}

.select-all {
    display: flex;
    align-items: center;
}

.search-row {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    display: none;
}

    .search-row input {
        flex: 1 1 auto;
    }

.select-type {
    border: 1px solid #cccccc;
    transition: box-shadow 0.3s, border-color 0.3s;
    border-radius: 4px;
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
    cursor: pointer;
    font-size: inherit;
}