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

.protected-sidebar{
    position: fixed;
    top: 0;
    left: -100%;
    width: 300px;
    background: $white;
    padding: 40px 0 0;
    height: 100vh;
    transition: all 0.6s;
    z-index: 10;
    &.show{
        left: 0;
        transition: all 0.6s;
        box-shadow: 16px 0px 16px 16px rgb(0 0 0 /8%);
    }
    &.sidebar-collapse{
        @media only screen and (min-width: 1024px){
            width: 70px;
            .protected-menu {
                li {
                    a{
                        font-size: 0;
                    }
                }
            }
        }
        @media only screen and (min-width: 1200px){
            width: 66px;
        }
        @media only screen and (min-width: 1441px){
            width: 78px;
        }
    }
    .sidebar-collapse-btn{
        @media only screen and (max-width: 1023px){
            display: none;
        }
        @media only screen and (min-width: 1024px){
            position: absolute;
            top: 0;
            bottom: 0;
            right: -16px;
            margin: auto;
            width: 26px;
            height: 26px;
            border-radius: 100%;
            background: $white;
            color: $primary;
            border: 1px solid $primary;
            padding-right: 2px;
            cursor: pointer;
            transform: rotate(0deg);
            transition: all 0.6s;
            &:hover, &.active{
                background: $primary;
                color: $white;
            }
            &.active{
                transform: rotate(180deg);
                transition: all 0.6s;
            }
            i{
                font-size: 14px;
            }
        }
        &::before{
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin: auto;
            width: 38px;
            height: 38px;
            border-radius: 100%;
            z-index: -1;
            border: 6px solid #f8f6f4;
        }
    }
    .protected-mobile-close{
        position: absolute;
        top: 9px;
        right: 9px;
        width: 22px;
        height: 22px;
        cursor: pointer;
        &::before,&::after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background: $primary;
            width: 100%;
            height: 2px;
        }
        &::before{
            transform: rotate(45deg);
        }
        &::after{
            transform: rotate(-45deg);
        }
    }
    @media only screen and (min-width: 1024px) {
        top: 82px;
        left: 0;
        width: 310px;
        padding: 20px 10px 16px;
        padding-right: 0 !important;
        z-index: 1;
        .protected-mobile-close{
            display: none;
        }
    }
    @media only screen and (min-width: 1200px) {
        width: 310px;
        padding: 20px 10px 16px;
    }
    @media only screen and (min-width: 1441px) {
        width: 370px;
        padding: 32px 10px 16px;
    }
    .protected-menu{
        max-height: calc(100vh - 50px);
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-color: $primary #E6D8C5;
        scrollbar-width: thin;
        &::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        &::-webkit-scrollbar-thumb {
            background-color: $primary;
        }
        &::-webkit-scrollbar-track {
            background-color: #e6d8c5;
        }
        @media only screen and (min-width: 1024px){
            max-height: calc(100vh - 110px);
            padding-right: 10px;
        }
        @media only screen and (min-width: 1441px){
            max-height: calc(100vh - 120px);
            padding-right: 10px;
        }
        li{
            border-bottom: 1px solid $mainBorder;
            &:first-child{
                border-top: 1px solid $mainBorder;
            }
            @media only screen and (min-width: 1024px) {
                margin-bottom: 10px;
                border: none;
                &:first-child{
                    border: none;
                }
            }
            @media only screen and (min-width: 1441px) {
                margin-bottom: 16px;
            }
            &:last-child{
                margin: 0;
            }
            a{
                font-size: 14px;
                color: $btnText;
                padding: 10px 14px;
                width: 100%;
                gap: 6px;
                white-space: nowrap;
                @media only screen and (min-width: 1024px) {
                    gap: 8px;
                }
                @media only screen and (min-width: 1441px) {
                    font-size: 16px;
                    padding: 16px;
                }
                &:hover,&.active{
                    background: $primary;
                    color: $white;
                    @media only screen and (min-width: 1024px) {
                        background: $tertiary;
                    }
                    i{
                        &::before{
                            color: $white;
                            transition: all 0.4s;
                        }
                    }
                }
                i{
                    color: $btnText;
                    &::before{
                        transition: all 0.4s;
                        font-size: 18px;
                        color: $btnText;
                        @media only screen and (min-width: 1024px) {
                            font-size: 20px;
                        }
                        @media only screen and (min-width: 1441px) {
                            font-size: 22px;
                        }
                    }
                }
            }
        }
    }
}