@import './variables.scss';

$organizationNameColor: lighten($mainBackgroundColor, 30%);
$linkColor: lighten($textColorDefault, 5%);
$menuItemActiveBackground: lighten($mainBackgroundColor, 5%);
$menuItemBorderColor: lighten($mainBackgroundColor, 5%);

.SidebarMenu {
    width: 250px;
    height: 100%;
    z-index: 15;
    position: fixed;
    left: 0;
    top: 0;
    overflow-y: auto;
    direction: rtl;
    background: $mainBackgroundColor;
    .Logo {
        margin: 30px 0 0 35px;
    }
    .userNameAndOrg {
        padding: 50px 10px 50px 35px;
        h6 {
            font-weight: 600;
        }
        p {
            color: $organizationNameColor;
        }
    }
    .SidebarNavigation {
        ul {
            list-style: none;
            padding: 0;
        }
        a {
            text-decoration: none;
            color: $linkColor;
            width: 100%;
            height: 100%;
            display: block;
            padding: 20px 0 20px 35px;
        }
        a:hover {
            transition: all 0.2s ease-in-out;
            background-color: $menuItemActiveBackground;
            opacity: 0.8;
        }
        .mainMenu {
            text-transform: uppercase;
            border-top: 1px solid $menuItemBorderColor;
            a {
                font-weight: 600;
                letter-spacing: 0.1rem;
                color: $simpleTextColor;
            }
        }
        .subMenu {
            > li {
                a {
                    &.active {
                        background-color: $menuItemActiveBackground;
                    }
                }
            }
        }
    }
}