////////////////////////////////
//       Mobile First
////////////////////////////////
//.c-sidebar, .sidebar-closed .c-sidebar {
.c-sidebar {
    display: block;

    ul, li { list-style-type: none }

    .sidebar-inner {
        list-style: none;
        margin: 0 0 0 0;
        padding: 0;

        > ul {
            padding: 0;
        }

        > ul > li {
            display: block;
            margin: 0;
            padding: 0;
            border: 0;

            &.heading {
                height: 50px;
                padding: 25px 15px 10px 15px;

                > h3 {
                    font-size: 13px;
                    padding: 0;
                    margin: 0;
                    font-weight: 600;
                }
            }

            > a {
                display: block;
                position: relative;
                margin: 1px 0 0 0;
                border: 0;
                padding: 12px 12px;
                text-decoration: none;
                font-size: $sidebar-menu-link-font-size;

                > .title {
                    font-weight: $sidebar-menu-link-font-weight;
                }
                > .arrow,
                > .title {
                    transition: opacity 300ms linear;
                    opacity: 1;
                }

                > i {
                    top: 3px;
                    font-size: $sidebar-menu-link-icon-font-size;
                    font-weight: 300;
                    width: $sidebar-menu-link-icon-font-size * 2;
                    text-align: center;
                    text-shadow: none;
                }

            }

            &.open {
                > a {
                    font-size: $sidebar-menu-link-font-size;
                }
            }

            &.active {
                > a {
                    border: none;
                    text-shadow: none;
                    font-size: $sidebar-menu-link-font-size;
                }
            }
        }

        li {

            > a {
                > .arrow {
                    &:before {
                        width: 10px;
                        float: right;
                        margin-right: 5px;
                        margin-left: 5px;
                        display: inline;
                        font-size: $sidebar-menu-sub-menu-link-icon-font-size;
                        font-family: FontAwesome;
                        height: auto;
                        content: "\f104";
                        font-weight: 300;
                        text-shadow: none;
                    }

                    &.open:before {
                        content: "\f107";
                        margin-right: 6px;
                    }
                }

                > .badge {
                    float: right;
                    margin-top: 1px;
                    margin-right: 0;
                }
            }
        }

        .sub-menu {
            list-style: none;
            //display: none;
            padding: 0;
            margin: 8px 0 8px 0;

            li {
                background: none;
                margin: 0;
                padding: 0;
                margin-top: 1px !important;

                > a {
                    display: block;
                    margin: 0;
                    padding: 9px 14px 9px 30px;
                    text-decoration: none;
                    font-size: $sidebar-menu-link-font-size;
                    font-weight: $sidebar-menu-link-font-weight;
                    background: none;

                    > i {
                        font-size: $sidebar-menu-sub-menu-link-icon-font-size;
                        margin-right: 1px;
                        width: $sidebar-menu-link-icon-font-size * 2;
                        text-align: center;
                    }

                    .arrow {
                        &:before {
                            //margin-top: -4px;
                        }

                        &.open:before {
                            margin-top: -2px;
                        }
                    }
                }

                > .sub-menu {
                    margin: 0;
                    > li {
                        > a {
                            padding-left: 40px;
                        }

                        > .sub-menu {
                            margin: 0;
                            > li {
                                > a {
                                    padding-left: 50px;
                                }
                            }
                        }
                    }
                }
            }
        }

        .sidebar-closed &,
        .sidebar-hidden & {
            display: none;
        }
    }
}

////////////////////////////////
//       Desktop
////////////////////////////////
@include media-breakpoint-up(md) {
    .c-sidebar {
        display: block;

        .sidebar-inner {
            width: $sidebar-width;
            float: left;
            position: relative;
            margin-right: -100%;
            transition: width 300ms linear;

            .sidebar-closed & {
                display: block;
                width: $sidebar-collapsed-width;
 
                > ul > li {
                    > a {
                        z-index: 999;
                        > .title,
                        > .arrow {
                            transition: opacity 300ms linear;
                            opacity: 0;
                            display: none;
                        }
                    }
                    &:hover {
                        > a {
                            width: $sidebar-width;
                            > .title,
                            > .arrow {

                                opacity: 1;
                                display: initial;
                            }
                        }
                        &.open {
                            .sub-menu {
                                z-index: 999;
                                display: block;
                                position: absolute;
                                left: $sidebar-collapsed-width;
                                background: white;
                                width: $sidebar-width - $sidebar-collapsed-width;
                                margin: 0;
                            }
                        }
                    }
                    &.open {
                        .sub-menu {
                            display: none;
                        }
                    }
                }
            }
        }
    }
}