/* theme switcher */

.theme-switcher .theme-dropdown-switcher{
    min-width: auto
}
.theme-switcher .theme-label{
    display: none!important
}
.theme-switcher .theme-dropdown-switcher .theme-list-container{
    padding: 0;
    border: 0;
    min-width: auto
}
.theme-switcher .theme-dropdown-switcher .theme-list-container .theme-list{
    position: absolute;
    top: 29px
}

.desktop .theme-switcher .theme-dropdown-switcher .theme-list-container .active-theme {
    color: var(--c-white)
}
.theme-switcher .theme-dropdown-switcher .theme-list-container .active-theme:after{
    background-image: url(/v2.238/r/images/wazza/icons/arrow-white-v1.svg);
    transform: rotate(-90deg);
    width: 18px;
    height: 18px;
    display: none
}
.theme-switcher .theme-dropdown-switcher .theme-list-container .active-theme .icon.arrow{
    min-width: 5px
}

.theme-switcher .theme-dropdown-switcher .icon{
    margin: 0; 
    display: flex;
    justify-content: center;
}
.theme-light .theme-switcher .theme-dropdown-switcher .theme-list .icon:before,
.theme-auto .theme-switcher .theme-dropdown-switcher .theme-list .icon:before{
   filter: invert(1)
}

.theme-switcher  .theme-dropdown-switcher label{
    display: none!important
}
.theme-switcher .theme-dropdown-switcher .theme{
    justify-content: center;    
    padding: 4px 0
}



/* */


.theme-dropdown-switcher {
    display: flex;
    flex-wrap: wrap;
    min-width: 110px;
    max-width: 110px
}

#root .theme-dropdown-switcher .theme-label {
    font-size: 10px;
    color: var(--c-primary);
    height: auto;
    padding-bottom: 4px
}

#root .theme-dropdown-switcher .theme-list-container label {
    cursor: pointer;
    height: 28px;
    display: flex;
    align-items: center;
    font-size: 12px;
   color: var(--c-primary)
}

.theme-dropdown-switcher:not(.active) .theme-list {
    display: none;
}

.theme-dropdown-switcher .theme-list .theme-selected {
    display: none
}

.theme-dropdown-switcher .theme-list-container {
    position: relative;
    width: 100%;
    min-width: 110px;
    height:  auto;
    border-radius: var(--r-border-radius-medium);
    border: 1px solid var(--c-primary) 
}

.theme-dropdown-switcher .theme-list-container .theme-list {
    position: relative;
    left: 0;
    width: 100%;
    z-index: 1000;
    overflow: hidden;
    border-top: 0;
    background-color: var(--c-white);
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.16)
}
.theme-dropdown-switcher .theme-list-container .active-theme {
    display: flex;
    align-items: center;
    cursor: pointer
}
.theme-dropdown-switcher .theme-list-container .active-theme:after{
    content: "";
    width: 21px;
    height: 21px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(/v2.238/r/images/betomall/icons/black/arrow-down-black.svg)
}
.theme-dark .theme-dropdown-switcher .theme-list-container .active-theme:after{
    background-image: url(/v2.238/r/images/wazza/icons/arrow-white-v1.svg);
    transform: rotate(-90deg);
    width: 18px;
    height: 18px
}
.theme-dropdown-switcher.active .active-theme {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.theme-dropdown-switcher .icon {
    margin-left: 3px;
    min-width: 24px
}

.theme-dropdown-switcher .theme {
    display: flex;
    padding: 4px 4px;
    align-items: center;
    background-color: var(--c-background);
    cursor: pointer;
}
.theme-dropdown-switcher .theme:hover{
    background-color: #eaeaea
}
.mouse .theme-dropdown-switcher .theme:hover {
    background-color: var(--o-primary-b);
}

.theme-dropdown-switcher .icon.dark::before,
.theme-dropdown-switcher .dark .icon::before {
    content: "";
    background-image: url(/v2.238/r/images/site/moon-white.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
    display: block;
    
}

.theme-dropdown-switcher .icon.light::before,
.theme-dropdown-switcher .light .icon::before {
    content: "";
    background-image: url(/v2.238/r/images/site/sun-white.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
    display: block;
    
}

.theme-dropdown-switcher .icon.auto::before,
.theme-dropdown-switcher .auto .icon::before {
    content: "";
    background-image: url(/v2.238/r/images/wazza/icons/Light_Dark_Mode-Auto-light-icon.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
    display: block
}
.theme-light .theme-switcher-footer .theme-dropdown-switcher .icon:before,
.theme-auto .theme-switcher-footer .theme-dropdown-switcher .icon:before{
   filter: invert(1)
}

.icon.arrow {
    margin-left: auto;
    margin-right: 0;
    color: var(--c-f-d)
}

.icon.arrow::before {
    content: " "
}


/* */

.mobile .theme-switcher .theme-dropdown-switcher{
    min-width: auto;
}
.mobile .theme-switcher .theme-dropdown-switcher .theme-list label{
    color: var(--c-black)
} 
.theme-light .mobile  .theme-switcher .theme-dropdown-switcher .active-theme .icon:before, 
.theme-auto .mobile .theme-switcher .theme-dropdown-switcher .active-theme .icon:before {
    filter: invert(1);
}