﻿/*DROPDOWN and SELECT*/

/*DROPDOWN*/

.dropdown-menu {
    margin: 6px 24px !important; /*for 8px distance from dropdown button (2px from popper translate)*/
    padding: 0px;
    border: none;
    border-radius: var(--border-radius-default);
    background-color: var(--white);
    box-shadow: var(--shadow-dropdown);
    min-width: 85px;
    max-height: 360px;
    /*overflow: auto;*/
    overflow: hidden; /*for overlay scrollbar*/
}
.dropdown-menu:has( .dropdown-footer) {
    max-height: none;
}

.dropdown-menu.show {
    display: flex; /*for overlay scrollbar*/
    flex-direction: column; /*for overlay scrollbar*/
}


.dropdown-item {
    padding: 8px; /*small list item*/
    height: 36px; /*needed to fix large icons issue*/
    font-size: var(--font-size-small); /*small list item*/
    line-height: var(--line-height-small); /*small list item*/
    border-radius: var(--border-radius-default);
    color: var(--black);
    font-weight: var(--font-weight-light);
    transition: background-color 0.5s ease;
    cursor: pointer;
}
.dropdown-item {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: normal;
}
.dropdown-item:focus-visible{
    outline: none;
}
.dropdown-item > p, .dropdown-item > span{
    margin-bottom: 0px;
    flex-grow: 1;
}
.menu-items-lg.dropdown-menu .dropdown-item {
    padding: 12px; /*large list item*/
    height: 44px; /*needed to fix large icons issue*/
    font-size: var(--font-size-medium); /*large list item*/
    line-height: var(--line-height-default); /*large list item*/
}
.dropdown-item:hover, .dropdown-item:focus {
    color: #2DB9F0;
    background-color: var(--rgba-hover-light);
}
.dropdown-item.active::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M17.9422 6.06719L7.94217 16.0672C7.88412 16.1253 7.81519 16.1714 7.73932 16.2029C7.66344 16.2343 7.58212 16.2505 7.49998 16.2505C7.41785 16.2505 7.33652 16.2343 7.26064 16.2029C7.18477 16.1714 7.11584 16.1253 7.05779 16.0672L2.68279 11.6922C2.56552 11.5749 2.49963 11.4159 2.49963 11.25C2.49963 11.0841 2.56552 10.9251 2.68279 10.8078C2.80007 10.6905 2.95913 10.6247 3.12498 10.6247C3.29083 10.6247 3.44989 10.6905 3.56717 10.8078L7.49998 14.7414L17.0578 5.18281C17.1751 5.06554 17.3341 4.99965 17.5 4.99965C17.6658 4.99965 17.8249 5.06554 17.9422 5.18281C18.0594 5.30009 18.1253 5.45915 18.1253 5.625C18.1253 5.79085 18.0594 5.94991 17.9422 6.06719Z" fill="%23717171"/></svg>');
    width: 20px;
    height: 20px;
    float: right; /*works if parent is diplay:block*/
    margin-left: auto; /*works if parent is diplay:flex*/
}
.dropdown-item:has( .vstack), .menu-items-lg.dropdown-menu .dropdown-item:has( .vstack) {
    height: auto;
}
.dropdown-item .vstack span:last-child {
    color: var(--subdued);
}

.dropdown-footer {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    padding: 8px;
    border-top: 0.5px solid var(--border-medium);
}

.dropdown-body {
    overflow: auto;
    max-height: 296px;
}

.status-dropdown-menu .dropdown-item .vstack span:first-child, 
.status-dropdown-menu .dropdown-item > span:first-of-type:not(.vstack) {
    font-weight: var(--font-weight-semibold)
}

/*SELECT*/
.select-custom input.input-custom {
    cursor: pointer;
    padding-right: 32px;
}
.select-custom::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><g id="CaretDown"><path id="Vector" d="M16.6925 7.94254L10.4425 14.1925C10.3845 14.2506 10.3156 14.2967 10.2397 14.3282C10.1638 14.3597 10.0825 14.3758 10.0003 14.3758C9.91821 14.3758 9.83688 14.3597 9.76101 14.3282C9.68514 14.2967 9.61621 14.2506 9.55816 14.1925L3.30816 7.94254C3.19088 7.82526 3.125 7.6662 3.125 7.50035C3.125 7.3345 3.19088 7.17544 3.30816 7.05816C3.42544 6.94088 3.5845 6.875 3.75035 6.875C3.9162 6.875 4.07526 6.94088 4.19253 7.05816L10.0003 12.8668L15.8082 7.05816C15.8662 7.00009 15.9352 6.95403 16.011 6.9226C16.0869 6.89117 16.1682 6.875 16.2503 6.875C16.3325 6.875 16.4138 6.89117 16.4897 6.9226C16.5655 6.95403 16.6345 7.00009 16.6925 7.05816C16.7506 7.11623 16.7967 7.18517 16.8281 7.26104C16.8595 7.33691 16.8757 7.41823 16.8757 7.50035C16.8757 7.58247 16.8595 7.66379 16.8281 7.73966C16.7967 7.81553 16.7506 7.88447 16.6925 7.94254Z" fill="%23717171"/></g></svg>');
    position: absolute;
    right: 12px;
    margin-top: -10px;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    pointer-events: none
}
.select-custom .dropdown-menu {
    left: 0px !important;
    right: 0px !important;
}

.filter-labels {
    display: flex;
    padding: 12px 8px;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    border-bottom: 0.5px solid var(--border-medium);
}
.applied-filter-labels {
    margin-top:16px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
}
