@use '../../utils' as *;
/*----------------------------------------*/
/*  3.4 Header Style 4
/*----------------------------------------*/

.tp-header-4{
    &-box{
        width: 100%;
        border-radius: 8px;
        padding: 0px 6px 0px 20px;
        background-color: var(--tp-common-white);
        box-shadow: 0 20px 34px 0 rgba(20, 24, 32, 0.1);
        @media #{$lg,$md}{
            padding: 6px 6px 6px 20px;
        }
        @media #{$xs}{
            padding: 6px;
        }
    }
    &-bar{
        height: 50px;
        width: 50px;
        flex: 0 0 auto;
        margin-left: 10px;
        border-radius: 8px;
        transition: all .3s;
        color: var(--tp-common-black);
        background-color: var(--tp-common-white);
        box-shadow: 0 20px 34px 0 rgba(20, 24, 32, 0.1);
        &:hover{
            color: var(--tp-common-white);
            background-color: var(--tp-common-purple);
        }
    }
}