.sc-dd { position: relative; display: inline-block; }

.sc-dd-toggle {
    max-width: 250px;
}
.sc-dd-toggle, .sc-dd-subtoggle{
    padding: 8px 34px 8px 10px;
    background: #fff;
    cursor: pointer;
    min-width: 240px;
    text-align: left;
    border-radius: 0;
    position: relative;
    font-size: 1em;
    border: 1px solid #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-dd-subtoggle {
    background: #fff;
    border:none;
    position: relative;
    padding-right: 26px; /* space for arrow */
}

.sc-dd-subtoggle::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);

    width: 10px;
    height: 10px;

    background-repeat: no-repeat;
    background-size: contain;

    /* right chevron */
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'>\
<path d='M3 1l4 4-4 4' stroke='%23666' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
}

.sc-dd-toggle::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);

    width: 14px;
    height: 6px;

    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'>\
<polygon points='0,0 14,0 7,8' fill='%23444'/>\
</svg>");

}

.sc-dd-menu{
    position: absolute;
    top: 100%;
    left: 0;
    width: 280px;
    border: 1px solid #999;
    background: #fff;
    display: none;
    z-index: 9999;
    border-radius: 0;
}

.sc-dd-search{ padding: 8px; border-bottom: 1px solid #ddd; }
.sc-dd-search-input{ width: calc(100% - 12px); padding: 6px; border: 1px solid #bbb; border-radius: 0; }

.sc-dd-list{ list-style:none; margin:0; padding:0;  max-height: min(800px, calc(100dvh - 80px)); overflow:auto; }
.sc-dd-item[data-value] .sc-dd-action{ width:100%; font-size:14px; text-align:left; padding:7px 10px; border:0; background:transparent; cursor:pointer; }
.sc-dd-action:hover{ background:#e9edf5; }

.sc-dd-sep{ height:1px; background:#ddd;margin:10px 0px; }
.sc-dd-disabled {
    padding-bottom: 10px;
    font-size: 14px;
    color: #aaa;
    text-align: center;
    pointer-events: none;   /* not clickable */
    cursor: default;
    user-select: none;
}
.sc-dd-has-submenu > .sc-dd-action{
    display:flex; justify-content:space-between; align-items:center;
}
.sc-dd-submenu{ list-style:none; margin:0; padding:0 0 0 14px; border-left:1px solid #ddd; display:none; }
.sc-dd-has-submenu.open > .sc-dd-submenu{ display:block; }

.sc-dd-empty{ padding:8px; font-size:13px; color:#777; display:none; }
.sc-dd-item.active > .sc-dd-action {
    background: #e6edf7;
}