@import 'bootstrap-sass/assets/stylesheets/bootstrap/_variables';
@import "../../styles/_enterprise_vars";

.hne-sidebar {
    background-color: color('white');
    transition: width 0.1s ease-in-out;
    z-index: 200;

    .hne-sidebar_profile {
        height: 200px;
        text-align: center;
        background-color: rgb(220, 223, 228);
        color: color('primary');
        padding: 3rem 0;

        .hne-sidebar_profile_initials {
            font-size: 7rem;
            font-family: $font-family-serif;
            word-spacing: -1rem;
        }

        .hne-sidebar_profile_name {
            text-transform: uppercase;
            word-break: break-all;
        }
    }

    .hne-sidebar_nav {
        list-style: none;
        margin: 0;
        padding: 0;

        a {
            padding: 10px 15px;
            display: block;
            color: color('primary');
            text-decoration: none;
            font-weight: bold;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            &:hover {
                text-decoration: none;
                background-color: rgb(220, 224, 236);
            }
        }
        li.active a {
            background-color: color('secondary');
            cursor: default;
        }
    }
    .hne-sidebar_icon {
        display: none;
    }

    @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
        text-align: center;
        width: 70px !important;

        .hne-sidebar_icon {
            display: inline;
        }
        .hne-sidebar_label {
            display: none;
            margin-left: 5px;
        }

        .hne-sidebar_profile {
            height: auto;
            padding: 1rem 0;

            .hne-sidebar_profile_initials {
                font-size: 2rem;
                word-spacing: inherit;
            }

            .hne-sidebar_profile_name {
                display: none;
            }
        }

        &:hover {
            text-align: left;
            width: 200px !important;
            box-shadow: 0px 1px 5px -1px black;

            .hne-sidebar_label {
                display: inline;
            }
        }
    }
}

.hne-sidebar-wrapper {
    height: auto !important;
}

@media (max-width: $screen-xs-max) {
    .hne-sidebar-wrapper > .hne-sidebar {
        position: static !important;
    }
}