.wrapper:not(:last-child) {
    padding-bottom: 40px;
}

.buttonWrapper {
    color: #666666;
    position: relative;
}

.buttonWrapper.isActive {
    border-left: solid 3px var(--green-strong);
}

.buttonWrapper:hover {
    color: #fff;
}


.buttonHover {
    position: absolute;
    width: 3px;
    left: 0;
    background-color: #fff;
    height: 0;
    transition: all 0.15s ease-in-out;
}


.buttonHover:global(.show-hover) {
    height: 100%;
}

.navigationButton {
    line-height: normal;
    cursor: pointer;
    font-family: 'Lustria';
    padding: 2px 32px;
    color: inherit;
    font-size: 1.5em;
    text-decoration: none;
    transition: color 0.15s ease-in-out;
    text-transform: capitalize;
}

.buttonHoverRight {
    left: unset;
    right: 0;
}

@media(max-width: 768px) {
    .wrapper:not(:last-child) {
        padding-bottom: 28px;
    }

    .buttonWrapper.isActive {
        border-left: solid 3px var(--green-strong);
    }

    .navigationButton {
        font-size: 1.8em;
    }

    .buttonWrapper:hover .buttonHoverRight,
    .buttonHoverRight.isActive {
        height: 100%;
    }

    .buttonHoverRight.isActive {
        background-color: var(--green-strong);
    }

}