@import "../styles/modules/importAll";

.WorkspaceNav {
    border-right: 0.1rem solid rgba($black, 0.05);
    width: 16rem;
    z-index: 2;
    transition: width 0.3s, height 0.3s;
    transition-timing-function: ease;
    background-color: #F5F5F5;
    box-shadow: 2px 0 3px rgba($black, 0.05);
    overflow: auto;

    ul,
    ol {
        list-style: none;
    }

    .header {
        height: 9rem;

        .rowPrimary {
            width: 100%;
            height: 4rem;
        }

        h1 {
            width: 100%;
            height: 4rem;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            a {
                flex: 1;
                margin-left: 1rem;
                background-image: url("../styles/img/logo.png");
                background-size: contain;
                background-repeat: no-repeat;
                background-position-y: center;
                background-position-x: 0;
                color: transparent;
                display: block;
            }
        }
    }

    .OrganizationMenu {
        padding: 1rem;
        background: rgba($black, 0.05);
        color: rgba($textPrimary, 0.65);

        .name {
            padding-bottom: 0.25rem;
        }

        .organization {}
    }

    .links {
        margin-top: 2.5rem;
        color: rgba($black, 1);

        ul {
            border-top: 1px solid rgba($black, 0.05);
            border-bottom: 1px solid rgba($white, 1);

            li {
                padding: 10px 5px 10px 1rem;
                margin-bottom: 0px;
                border-bottom: 1px solid rgba($black, 0.05);
                border-top: 1px solid rgba($white, 1);

                a {}
            }
        }
    }

    .subtitle {
        text-decoration: none;
        text-transform: capitalize;

        &.notImplemented {
            color: rgba($textPrimary, 0.6);
        }

        a {
            color: rgba($black, 0.7);
        }

        &.selected {
            font-weight: bold;
            color: rgba($black, 1);
            position: relative;

            // &:after {
            //     font-family: FontAwesome;
            //     position: absolute;
            //     top: 2px;
            //     content: "\f054";
            //     display: inline-block;
            //     font-size: 0.8rem;
            //     margin-left: 10px;
            // }
       
        }
    }

    .NavLink, .CollectionsList {}

    .NavLink {
        color: rgba($black, 0.7);

        .selected {
            color: rgba($black, 1);
        }

        border-bottom: 0.1rem solid rgba($black, 0.1);

        &:first-child {
            padding-top: 0;
        }

        &:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }
    }

    .CollectionsList {
        h3 {
            display: inline-block;
            position: relative;
            padding-right: 2.5rem;
            font-size: 1rem;
        }

        .subtitle {
            color: rgba($black, 0.4);
        }

        .addCollection {
            line-height: 1rem;
            font-size: 1.4rem;
            background-color: transparent;
            border: none;
            position: absolute;
            right: 0;
            color: rgba($black, 1);
        }

        ul {
            border: none;

            li {
                padding: 2px 5px 2px 5px;
                margin: 1px 0;
                background: none;
                border: none;

                &:first-child {
                    margin-top: 5px;
                }

                a {
                    text-decoration: none;
                    color: rgba($black, 0.7);

                    &.selected {
                        color: rgba($black, 1);
                    }
                }
            }
        }
    }

    .NavWorkspaceSwitch {
        padding: 1rem;
        text-align: center;

        a {}
    }

    &.hidden {
        display: none;
    }
}

@media print {
    .WorkspaceNav,
    .LibraryCreateButton,
    .LibrarySearch {
        display: none !important;
    }
}