///////////////////////////////////////////////////////////////
// Device: Desktop
///////////////////////////////////////////////////////////////

.jeu8
{
    padding: 60px 0 30px 0;
    background-color: black;
}
.jeu8-menu
{
    background-color: $color-grey-darker;
    display:          flex;
        align-items:  center;
}
.jeu8-menu-item
{
    list-style: inside none;
    position: relative;
    transition: all 0.3s ease;
    flex-basis: 0;
    flex-grow: 1;
    text-align: center;
    
    &::after
    {
        @include transform(translateX(0) translateY(-50%));
        
        background: $color-golden;
        content: "";
        height: 50px;
        opacity: 1;
        position: absolute;
        left:   0;
        top:    50%;
        transition: all 0.3s ease;
        width:      1px;
    }
    
    &:first-child
    {
        &::after
        {
            display: none;
        }
    }
}
.jeu8-menu-item:hover,
.jeu8-menu-item.is-active
{
    background: $color-golden;
    
    .jeu8-menu-item-link-text
    {
        color: #FFFFFF;
    }
    
    & + .jeu8-menu-item
    {
        &::after
        {
            @include transform(translateX(-1px) translateY(-50%));
            
            opacity: 0;
        }
    }
}
.jeu8-menu-item-link
{
    display: block;
    padding: 40px 0;
}
.jeu8-menu-item-link-text
{
    color:      $color-grey-font;
    font-size:  1.2em;
    transition: color 0.2s ease;
}

///////////////////////////////////////////////////////////////
// Device: Tablet
///////////////////////////////////////////////////////////////

@include tablet-landscape-and-below
{
    .jeu8-menu
    {
        background: transparent;
        padding:    0 20px;
    }
    .jeu8-menu-item
    {
        background: $color-grey-darker;
        float:      none;
        margin-top: 10px;
        width:      100%;
        
        &:first-child
        {
            border-top: none;
        }
        
        &::after
        {
            display: none;
        }
    }
}