.settings-panel{
    background: #fff;
    position: fixed;
    height: calc(100vh - 100px);
    width: 280px;
    top: 70px;
    right: -280px;
    z-index: 100;
    border: 1px solid transparentize($primary, 0.4);
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    transition: 0.3s ease-in;
    .settings-options{
        overflow: auto;
        max-height: 100%;
    }
    .settings-btn{
        @include var-bg-color("primary");
        color: color-yiq($primary);
        padding: 10px;
        position: absolute;
        top: 40%;
        left: -35px;
        width: 35px;
        border-radius: 50px 0 0 50px;
        cursor: pointer;
    }
    &.open{
        right: 0;
    }
    @include media-breakpoint-down(md) {
        display: none;
    }
}
.rtl {
    .settings-panel{
        left: -280px;
        right: auto;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
        
        &.open {
            left: 0;
        }
        .settings-btn {
            left: 0;
            right: -35px;
            border-radius: 0 50px 50px 0;
        }
    }
}