/*
    Components
    Created on 11/20/2017 by Corey O'Brien.
*/

/* ++++ Nav Bar ++++ */
.sidebar {
    transition: 0.3s;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    overflow-x: hidden;
    overflow-y: auto;
    background: $navy;
    width: 16rem;
    max-width: 16rem;
    padding-left: 0;
    padding-right: 0;
    color: $white;
    font-family: $base-font-medium;
    &.sidebar-collapsed {
        transition: 0.3s;
        width: 5.625rem;
        max-width: 5.625rem;
        .sidebar-toggle {
            right: 2.1rem;
        }
        .brand {
            width: 4rem;
            background-position: 0rem;
        }
        .page-title {
            display: none;
        }
        nav {
            ul {
                li {
                    a {
                        span {
                            display: none;
                        }
                        i {
                            right: -1.1rem;
                            &.sub-menu-icon {
                                right: -0.5rem;
                            }
                        }
                    }
                }
            }
        }
        .user-menu {
            ul {
                li {
                    a {
                        &.user-settings {
                            display: none;
                        }
                    }
                }
            }
        }
    }
    .brand {
        background: url(#{$img-path}logo@2x.png) no-repeat;
        background-size: cover;
        height: 2.25rem;
        width: 13.5rem;
        margin: 3.5rem auto 5.5rem auto;
    }
    .sidebar-toggle {
        position: absolute;
        right: 1.25rem;
        top: 0.625rem;
        font-size: 1.6rem;
        color: $white;
        z-index: 1000;
    }
    .page-title {
        font-size: 0.875rem;
        font-family: $base-font-light;
        position: absolute;
        top: 8rem;
        left: 3rem;
    }
    nav {
        text-align: left;
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            li {
                padding: 0;
                margin: 0;
                a {
                    border-top: 0.0625rem solid $white;
                    border-bottom: 0.0625rem solid $white;
                    border-left: 0.1875rem solid $navy;
                    padding: 1rem 0 1rem 0.8rem;
                    color: $white;
                    font-family: $base-font-light;
                    font-weight: normal;
                    font-size: 0.875rem;
                    text-transform: uppercase;
                    display: block;
                    margin-bottom: -0.0625rem;
                    i {
                        margin-right: 0.625rem;
                        font-size: 1.32rem;
                        top: 0.1rem;
                        position: relative;
                        text-align: center;
                        min-width: 1.3rem;
                        &.sub-menu-icon {
                            top: 0.3rem;
                            font-size: 0.85rem;
                            color: darken($white, 20%);
                        }
                    }
                    &:active,
                    &:focus,
                    &:hover {
                        background: $sky_blue;
                        text-decoration: none;
                        border-left: 0.1875rem solid $red;
                    }
                    &.active {
                        background: $light_gray;
                        border-top: 0.0625rem solid $navy;
                        border-bottom: 0.0625rem solid $navy;
                        border-left: 0.1875rem solid $red;
                        position: relative;
                        color: $navy;
                    }
                    &.active {
                        i.fa-chevron-right {
                            float: right;
                            position: relative;
                            top: 0.29rem;
                        }
                    }
                }
            }
        }
    }
    &.submenu {
        display: none;
        left: 16rem;
        background: $white;
        border-top: 0.0625rem solid $navy;
        border-right: 0.0625rem solid $navy;
        border-bottom: 0.0625rem solid $navy;
        color: $navy;
        padding: 1rem;
        top: 0.35rem;
        bottom: 0.35rem;
        &.sidebar-collapsed {
            width: 16rem;
            max-width: 16rem;
            left: 5.625rem;
            ul {
                li {
                    a {
                        i {
                            right: 0;
                        }
                    }
                }
            }
        }
        h3 {
            color: $navy;
            font-family: $base-font-medium;
            font-size: 0.875rem;
            margin: 1.5rem 0 0.35rem 0;
            border-bottom: 0.0625rem solid $navy;
            padding-bottom: 0.65rem;
            text-transform: uppercase;
        }
        .row {
            &:first-child {
                h3 {
                    margin: 0.35rem 0;
                }
            }
        }
        ul {
            li {
                a {
                    border: none;
                    padding: 0.75rem 0 0.75rem 0.5rem;
                    text-transform: none;
                    color: $sky_blue;
                    margin-bottom: -0.0625rem;
                    i {
                        font-size: 1rem;
                        top: 0;
                        min-width: 1rem;
                        margin-right: 0.35rem;
                    }
                    &:active,
                    &:focus,
                    &:hover,
                    &.active {
                        background: $light_gray;
                        border: none;
                    }
                }
            }
        }
    }
    .left-nav-open {
        display: block;
    }
    .user-menu {
        bottom: 0.0625rem;
        position: absolute;
        width: 100%;
        nav {
            ul {
                li {
                    position: relative;
                    a {
                       border-bottom: none;
                       background: $navy;
                       &.user-settings {
                            position: absolute;
                            right: 0;
                            top: 0;
                            border: none;
                            border-top: 0.0625rem solid $white;
                       }
                    }
                }
            }
        }
    }
    @media (max-width: 768px) {
        transition: 0.3s;
        width: 5.625rem;
        max-width: 5.625rem;
        &.submenu {
            width: 16rem;
            max-width: 16rem;
            left: 5.625rem;
            ul {
                li {
                    a {
                        i {
                            right: 0;
                        }
                    }
                }
            }
        }
        .sidebar-toggle {
            display: none;
        }
        .brand {
            width: 4rem;
            background-position: 0rem;
        }
        .page-title {
            display: none;
        }
        nav {
            ul {
                li {
                    a {
                        span {
                            display: none;
                        }
                        i {
                            right: -1.1rem;
                            &.sub-menu-icon {
                                right: -0.5rem;
                            }
                        }
                    }
                }
            }
        }
        .user-menu {
            ul {
                li {
                    a {
                        &.user-settings {
                            display: none;
                        }
                    }
                }
            }
        }
    }    
}

.topbar {
    transition: 0.3s;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: $navy;
    height: 3rem;
    max-height: 3rem;
    color: $white;
    font-family: $base-font-medium;
    padding: 0.7rem 1.0rem;
    .brand {
        background: url(#{$img-path}logo@2x.png) no-repeat;
        background-size: cover;
        height: 1.9rem;
        width: 8.4rem;
        margin: 0;
    }
    .topbar-toggle {
        position: absolute;
        right: 1.0rem;
        top: 0.3rem;
        font-size: 1.6rem;
        color: $white;
        z-index: 1000;
    }
    .top-nav {
        display: none;
        background: $navy;
        transition: 0.3s;
        top: 0.7rem;
        position: relative;
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            li {
                padding: 0;
                margin: 0;
                a {
                    border-bottom: 0.0625rem solid $white;
                    border-left: 0.1875rem solid $navy;
                    padding: 1rem 0 1rem 0.8rem;
                    color: $white;
                    font-family: $base-font-light;
                    font-weight: normal;
                    font-size: 0.875rem;
                    text-transform: uppercase;
                    display: block;
                    i {
                        margin-right: 0.625rem;
                        font-size: 1.32rem;
                        top: 0.1rem;
                        position: relative;
                        right: 0rem;
                    }
                    &:active,
                    &:focus {
                        background: $sky_blue;
                        text-decoration: none;
                        border-left: 0.1875rem solid $red;
                    }
                    &.active {
                        background: darken($light_gray, 10%);
                        border-top: 0.0625rem solid $navy;
                        border-bottom: 0.0625rem solid $navy;
                        border-left: 0.1875rem solid $red;
                        position: relative;
                        color: $navy;
                    }
                    &.active {
                        i.fa-chevron-right {
                            float: right;
                            position: relative;
                            top: 0.29rem;
                        }
                    }
                }
            }
            &:last-child a {
                border-bottom: none;
            }
        }
    }
}

/* ++++ Tables ++++ */
.table {
    thead {
        th {
            color: $charcoal;
            font-family: $base-font-medium;
            font-size: 0.875rem;
            background: none;
            border: none;
            padding: 0.4rem 0.4rem 1rem 0.4rem;
        }
    }
    tbody {
        th,td {
            padding: 0.4rem;
            font-size: 0.875rem;
        }
        th {
            font-family: $base-font-medium;
        }
    }
}

/* ++++ Notes Styles  ++++ */
.notes {
    font-size: 0.75rem;
    overflow-y: auto;
    height: 15.5rem;
    dt {
        margin: 0 0 0.3125rem 0;
    }
    dd {
        font-family: $base-font;
        margin: 0 0 1.25rem 0;
    }
}

/* ++++ ng-usy Overide Styles  ++++ */
// TODO: Figure out whether these should be in the global pattern library or not.  Talk with Sri and Alok about the topic.
.ng-busy > * {
    position: fixed;
}

.ng-busy-backdrop {
    background: $light_gray;
    opacity: .8;
    position: fixed;
}

.ng-busy-default-sign {
    padding: 2rem 3rem 1.6rem 3rem;
    border: 0.3125rem solid $navy;
    border-radius: 0;
    box-shadow: 0 0.0625rem 0.125rem $light-gray;
    background: $white;
    color: $sky_blue;
    top: 2.5rem;
}

.ng-busy-default-text {
    margin-left: 0.7rem;
    font-size: 1.2rem;
    font-family: $base-font-medium;
}

.ng-busy-default-spinner {
    width: 1.8rem;
    height: 2.1rem;
    top: -0.2rem;
}

.ng-busy-default-spinner {
    div {
        background: $sky_blue;
    }
}