/*--------------------------------------------------------------
Custom Dropdowns
--------------------------------------------------------------*/

.wpstream_dropdown_select  {
    .btn-secondary{
        background: transparent;
        border-radius: 25px;
        padding: 10px 20px;
        display: flex;
        color: var(--bs-body-color);
        border: 1px solid var(--wpstream-header-search-border-color, var(--wpstream-header-search-border-color-default));
    } 
    .dropdown-toggle:active::after{
        background-color: var(--bs-btn-active-color);
    }
    .dropdown-toggle::after{
        content: "";
        border: unset;
        margin-left: 12px;
        display: block;
        vertical-align: unset;
        background-color: var(--bs-body-color);
        
        mask-image: escape-svg(url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#67676B' xmlns='http://www.w3.org/2000/svg'><path d='M6 9L12 15L18 9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"));
        mask-size: 24px;
        mask-repeat: no-repeat;
        width: 24px;
        height: 24px;
        transition: all 200ms ease;
       // content: url(../img/icons/menu-arrow.svg);
       content:'';
    }


    .dropdown-menu{
      flex-direction: column;
    width: 100%;
    min-width: 175px;
    max-height: 250px;
    border-radius: 8px;
    background-color: var(--wpstream-header-submenu-background-color, var(--wpstream-header-search-dropdown-bg));
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.25);
    overflow-y: auto;
    border: none;
    padding-right: 10px; /* Adjust padding to create space for scrollbar */

    /* The entire scroll bar */
    &::-webkit-scrollbar {
        width: 7px; /* Width of the vertical scrollbar */
        height: 12px; /* Height of the horizontal scrollbar */
        margin-right: 3px; /* Add margin to the scrollbar */
    }

    /* The track (progress bar) of the scroll bar */
    &::-webkit-scrollbar-track {
        background: var(--wpstream-header-submenu-background-color, var(--wpstream-header-search-dropdown-bg));
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    }

    /* The handle (movable part) of the scroll bar */
    &::-webkit-scrollbar-thumb {
        background: var(--wpstream-scroll-bar-thumb-color);
        border-radius: 20px;
        height: 50px;
    }

    /* Handle on hover */
    &::-webkit-scrollbar-thumb:hover {
        background: #555;
    }


        .dropdown-item {
            color: var(--wpstream-header-submenu-font-color, var(--wpstream-header-submenu-font-color-default));
            padding: 7px 15px;
            text-wrap: pretty;
          
            &:hover,
            &:focus {
                background-color: var(--wpstream-header-menu-item-back-color-hover, var(--argintinian-blue));
                color: var(--wpstream-header-submenu-font-color-hover, var(--wpstream-header-submenu-font-color-hover-default))!important;
            }
            
        }
      
    }
} 