/* ============================================================
   INCEPTION V20
   DROPDOWN ICON / BUTTON ONLY
   ============================================================ */


/*
 * Input menyediakan ruang khusus untuk chevron.
 */
#inception-register-v50-host
.v50-searchable
> .v50-search-input{

    padding-right:
        50px!important;
}


/* ============================================================
   BUTTON AREA
   ============================================================ */

#inception-register-v50-host
.v50-searchable
> .v20-dropdown-toggle{

    position:
        absolute!important;

    top:
        0!important;

    right:
        0!important;

    bottom:
        0!important;

    left:
        auto!important;

    width:
        44px!important;

    min-width:
        44px!important;

    max-width:
        44px!important;

    height:
        100%!important;

    min-height:
        0!important;

    margin:
        0!important;

    padding:
        0!important;

    display:
        flex!important;

    align-items:
        center!important;

    justify-content:
        center!important;

    transform:
        none!important;

    border:
        0!important;

    border-radius:
        0
        10px
        10px
        0!important;

    outline:
        none!important;

    background:
        transparent!important;

    box-shadow:
        none!important;

    color:
        #7d8fb9!important;

    cursor:
        pointer!important;

    line-height:
        1!important;

    z-index:
        5!important;

    transition:
        none!important;

    animation:
        none!important;
}


/*
 * Hilangkan pseudo icon dari semua CSS lama.
 */
#inception-register-v50-host
.v50-searchable
> .v20-dropdown-toggle::before,

#inception-register-v50-host
.v50-searchable
> .v20-dropdown-toggle::after{

    content:
        none!important;

    display:
        none!important;
}



/* ============================================================
   SVG ICON
   ============================================================ */

#inception-register-v50-host
.v20-dropdown-icon{

    width:
        18px!important;

    height:
        18px!important;

    display:
        flex!important;

    align-items:
        center!important;

    justify-content:
        center!important;

    flex:
        0 0 18px!important;

    margin:
        0!important;

    padding:
        0!important;

    color:
        inherit!important;

    line-height:
        0!important;

    pointer-events:
        none!important;
}


#inception-register-v50-host
.v20-dropdown-icon
svg{

    display:
        block!important;

    width:
        16px!important;

    height:
        16px!important;

    margin:
        0!important;

    padding:
        0!important;

    overflow:
        visible!important;

    transform:
        rotate(0deg)!important;

    transform-origin:
        50% 50%!important;

    transition:
        transform .16s ease!important;
}



/* ============================================================
   HOVER / FOCUS
   ============================================================ */

#inception-register-v50-host
.v50-searchable
> .v20-dropdown-toggle:not(:disabled):hover{

    background:
        rgba(81,108,190,.055)!important;

    color:
        #6078b8!important;
}


#inception-register-v50-host
.v50-searchable
> .v20-dropdown-toggle:not(:disabled):focus-visible{

    background:
        rgba(81,108,190,.07)!important;

    color:
        #536db2!important;
}



/* ============================================================
   DISABLED
   ============================================================ */

#inception-register-v50-host
.v50-searchable
> .v20-dropdown-toggle:disabled{

    opacity:
        .40!important;

    background:
        transparent!important;

    cursor:
        not-allowed!important;
}



/* ============================================================
   OPEN STATE
   MENU OPEN => CHEVRON ROTATE
   ============================================================ */

#inception-register-v50-host
.v50-searchable:has(
    > .v50-search-menu.open
)
> .v20-dropdown-toggle
.v20-dropdown-icon
svg{

    transform:
        rotate(180deg)!important;
}



/* ============================================================
   KILL ANY OLD FAKE ICON
   ============================================================ */

#inception-register-v50-host
.v50-searchable::before,

#inception-register-v50-host
.v50-searchable::after,

#inception-register-v50-host
.v50-search-input::before,

#inception-register-v50-host
.v50-search-input::after{

    content:
        none!important;
}



/*
 * Kalau V19 memberi class v19-single-toggle,
 * class itu tetap dipakai tetapi geometri V20 menang.
 */
#inception-register-v50-host
.v50-searchable
> .v19-single-toggle.v20-dropdown-toggle{

    top:
        0!important;

    right:
        0!important;

    bottom:
        0!important;

    width:
        44px!important;

    height:
        100%!important;

    transform:
        none!important;

    display:
        flex!important;

    align-items:
        center!important;

    justify-content:
        center!important;
}