@import '../../../../style/variables.scss';

.web-setting-sidebar{
    width: 100%;
    flex-shrink: 0;
    // border: 1px solid $primary;
    border-top: none;
    .sticky-inner{
        padding: 16px;
        border: 1px solid $primary;
        @media only screen and (min-width: 768px) {
            position: sticky;
            top: 95px;
            // max-height: calc(100vh - 120px);    
            // overflow: auto;
            // &::-webkit-scrollbar {
            //     width: 0px;
            //     height: 0;
            // }
        }
        @media only screen and (min-width: 1200px) {
            top: 110px;
            // max-height: calc(100vh - 130px); 
        }
        @media only screen and (min-width: 1441px){
            top: 120px;
            // max-height: calc(100vh - 140px); 
        }
        @media only screen and (min-width: 1600px) {
            padding: 40px;        
        }
        
    }
    @media only screen and (min-width: 768px) {
        width: 270px;
    }
    @media only screen and (min-width: 1024px) {
        width: 300px;
    }
    @media only screen and (min-width: 1600px) {
        width: 440px;
    }
    h3{
        // text-transform: lowercase;
        font-size: 22px;
        font-family: 'Canto';
        font-weight: 400;
        line-height: 1.1;
        color: $black25;   
        @media only screen and (min-width: 640px) {
            font-size: 24px;
        }
        @media only screen and (min-width: 768px) {
            font-size: 26px;
            margin-bottom: 15px;
        }
        @media screen and (min-width: 1200px){
            font-size: 30px; 
        } 
        @media only screen and (min-width: 1600px) {
            font-size: 44px;
            margin-bottom: 30px;
        }
    }
    .web-setting-menu{
        margin-bottom: 16px;
        flex-wrap: wrap;
        @media only screen and (min-width: 768px) {
            margin-bottom: 20px;
        }
        @media only screen and (min-width: 1600px) {
            margin-bottom: 32px;
        }
        &:last-child{
            margin: 0;
        }
        li{
            @media only screen and (min-width: 768px) {
                margin-bottom: 10px;
            }
            @media only screen and (min-width: 1600px) {
                margin-bottom: 16px;
            }
            &:last-child{
                margin: 0;
            }
            .link{
                font-size: 14px;
                line-height: 1;
                color: $grey5E;
                gap: 10px;
                padding: 10px;
                cursor: pointer;
                font-family: 'Avenir Next';
                font-weight: 500;
                text-transform: capitalize;
                @media only screen and (max-width: 480px) {
                    font-size: 13px;
                    flex-direction: column;
                }
                @media only screen and (min-width: 640px) {
                    font-size: 16px;
                    line-height: 22px;
                    padding: 10px 12px;
                }
                @media only screen and (min-width: 1024px) {
                    
                }
                @media only screen and (min-width: 1441px) {
                    gap: 10px;
                    font-size: 18px;
                    padding: 14px 16px;
                }
                &:hover,&.active{
                    background: $primary;
                    color: $white;
                    i{
                        &::before{
                            background-color: $white;
                            transition:  all 0.4s;
                        }
                    }
                }
                i{
                    font-size: 18px;
                    flex-shrink: 0;
                    height: 22px;
                    width: 22px;
                    @media only screen and (min-width: 769px) {
                        height: 20px;
                        width: 20px;
                    }
                    @media only screen and (min-width: 1024px) {
                        font-size: 22px;
                    }
                    @media only screen and (min-width: 1441px) {
                        font-size: 28px;
                        height: 22px;
                        width: 22px;
                    }
                    &::before{
                        background-color: $grey5E;
                        transition:  all 0.4s;
                    }
                }
            }
        }
    }
}