$arrow-bg: #000;

.sidebar {
    @screen smx {
        @apply .hidden;
    }

    @apply .fixed .left-0 .bottom-0 .bg-white .overflow-auto .border-r .border-grey-lighter .py-8;
    top: 56px;
    width: 20rem;
    font-size: 15px;

    ul {
        @apply .m-0 .p-0;
    }

    a {
        @apply .inline-block;
    }

    .nav-links {
        @apply .px-6;

        .nav-link, .repo-link {
            @apply .my-2;
        }
    }

    .sidebar-group {
        &:not(.first) {
            @apply .mt-8;
        }

        .sidebar-group {
            @apply .pl-2;
        }

        &:not(.collapsable) {
            .sidebar-heading {
                cursor: auto;
                color: inherit;
            }
        }

        a.sidebar-link {
            @apply .pl-8;

            &:hover {
                @apply .no-underline .text-blue-light;
            }
        }
    }

    .sidebar-heading {
        @apply .text-blue .text-lg .font-bold .px-6 .mt-0 .mb-2 .cursor-pointer;
        transition: color 200ms ease;

        &.open, &:hover {
            color: inherit;
        }

        .arrow {
            @apply .inline-block .relative;
            top: -0.12em;
            left: 0.5em;
            width: 0;
            height: 0;

            &.up {
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-bottom: 6px solid $arrow-bg;
            }
            &.down {
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-top: 6px solid $arrow-bg;
            }
            &.right {
                border-top: 4px solid transparent;
                border-bottom: 4px solid transparent;
                border-left: 6px solid $arrow-bg;
            }
            &.left {
                border-top: 4px solid transparent;
                border-bottom: 4px solid transparent;
                border-right: 6px solid $arrow-bg;
            }
        }
        &.open .arrow {
            top: -0.18em;
        }

        .version-select {
            @apply .relative .inline-block .text-sm;

            &:focus {
                @apply .outline-none;
            }

            .selected {
                @apply .select-none .border .border-grey-lighter .cursor-pointer .px-4;
                border-radius: 1rem;

                &:hover, &.open {
                    @apply .bg-grey-lighter .border-grey-lighter;
                }

                .arrow {
                    @apply .inline-block .relative;
                    top: -0.16em;
                    left: .5em;
                    width: 0;
                    height: 0;
                    border-left: 4px solid transparent;
                    border-right: 4px solid transparent;
                    border-top: 6px solid #b8c2cc;
                }
                
            }

            .items {
                @apply .absolute .right-0 .bg-white .shadow .p-1 .mt-1;
                border-radius: 1rem;
                z-index: 100;
                
                .item {
                    @apply .select-none .rounded-full .cursor-pointer .px-2 .border .border-white;
                    white-space: nowrap;
                    margin-top: .125rem;
                    margin-bottom: .125rem;

                    &:hover, &:focus {
                        @apply .bg-grey-lighter;
                    }

                    &:last-child {
                        @apply .mb-0;
                    }
                }
            }
        }
    }

    .sidebar-group-items {
        transition: height .1s ease-out;
        overflow: hidden;
    }

    .sidebar-sub-headers {
        @apply .pl-4 .mb-1;

        a.sidebar-link {
            @apply .text-sm .border-l-0 .pt-0 .pb-1;
        }
    }

    a.sidebar-link {
        @apply .inline-block .w-full .border-l-4 .border-transparent .text-grey-darkest .px-6 .py-1 .font-normal;

        &:hover {
            @apply .text-blue;
        }

        &.active {
            @apply .border-blue .font-bold .text-blue;
        }
    }
}

@screen md {
    .no-sidebar > .sidebar {
        @apply .hidden;
    }
}

.sidebar-mask {
    @apply .fixed .top-0 .left-0 .h-screen .w-screen .hidden;
}

.sidebar-open > .sidebar {
    @screen smx {
        @apply .inline .w-full .z-50;
        top: 56px;
    }
}
