$label-arrow-wh: 12px;

tg-project-menu {
    background-position: 0 -300px;
    display: inline-block;
    min-height: calc(100vh - 40px);
    min-width: 50px;
    padding: 1rem 0;
    position: relative;
    text-transform: uppercase;
    z-index: 99;
    .menu {
        &.menu-fixed {
            position: fixed;
            top: 1rem;
        }
    }
}

.main-nav {
    list-style: none;
    padding: 0;
    position: relative;
    text-align: center;
    a {
        display: block;
        padding: 1rem .7rem;
        position: relative;
    }
    li {
        position: relative;
    }
    a:hover {
        background: rgba($black, .2);
        transition: color .3s linear;
        svg {
            fill: $primary-light;
            transition: fill .3s linear;
        }
        .helper {
            @include font-size(small);
            animation: slideLeft 200ms ease-in-out both;
            background: linear-gradient(to right, rgba($black, 1) 0%, rgba($black, .8) 100%);
            color: $white;
            display: block;
            left: 50px;
            opacity: 1;
            padding: .4rem 1rem;
            position: absolute;
            top: calc(50% - 1rem);
            transition: all .2s;
            white-space: nowrap;
            z-index: 99;
            &::after {
                background: rgba($blackish, 1);
                content: '';
                height: $label-arrow-wh;
                left: calc(-#{$label-arrow-wh}/2);
                position: absolute;
                top: calc(50% - #{$label-arrow-wh}/2);
                transform: rotate(45deg);
                width: $label-arrow-wh;
                z-index: 98;
            }
        }
    }
    svg {
        fill: $white;
        height: 1.7rem;
        width: 1.7rem;
        path {
            opacity: 1;
        }
    }
    span {
        display: block;
    }
    .helper {
        display: none;
    }
    .icon {
        font-size: 1.5rem;
        line-height: 2.2rem;
    }
    .item {
        @include font-size(large);
    }
    .active {
        background: rgba($white, .95);
        color: $secondary-dark;
        svg {
            fill: $secondary-dark;
            opacity: 1;
            stroke: $secondary-dark;
        }
    }
}

@keyframes slideLeft {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.backlog-sprints-menu {
    @include font-size(small);
    animation: slideLeft 200ms ease-in-out both;
    background: linear-gradient(to right, rgba($black, 1) 0%, rgba($black, .8) 100%);
    color: $white;
    display: block;
    left: 50px;
    opacity: 1;
    padding: .4rem 1rem;
    position: absolute;
    top: 1rem;
    transition: all .2s;
    white-space: nowrap;
    z-index: 99;
    a {
        color: $white;
        padding: .6rem .8rem;
        text-align: left;
        text-transform: none;
        &:nth-child(2) {
            padding: 1rem .8rem .6rem;
        }
        &:last-child {
            padding: .6rem .8rem .4rem;
        }
        &:hover {
            background: none;
        }
    }
    &::after {
        background: rgba($blackish, 1);
        content: '';
        height: $label-arrow-wh;
        left: calc(-#{$label-arrow-wh}/2);
        position: absolute;
        top: calc(1rem - #{$label-arrow-wh}/2);
        transform: rotate(45deg);
        width: $label-arrow-wh;
        z-index: 98;
    }
}