//  #   Navigation
//      Right/Left buttons to change page


//  *******************************************************
//  ##  Variables
//  *******************************************************

// Shows/hide the left/right arrows
$navigation-show                        : true !default;
//  Styling for the left/right arrows
$navigation-map                     : (
                                            max-width: 150px,
                                            min-width: 90px,
                                            font-size: 40px,
                                            color: $color-button
                                        ) !default;
//  Styling for the left/right arrows on hover
$navigation-hover-map                       : (
                                            text-decoration: none,
                                            color: $color-button-hover
                                        ) !default;


//  *******************************************************
//  ##  Nav buttons
//  *******************************************************

// Shows/hide the left/right arrows
@if $navigation-show == false { 
    .navigation { display: none !important; } 
}

.navigation
{
    position: absolute;
    top: $header-height;
    bottom: 0px;
    margin: 0;
    

    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;

    text-align: center;

    @include print( $navigation-map );

    transition: all 350ms ease;

    @media (max-width: $mobileMaxWidth)
    {
        position: static;
        top: auto;
        max-width: 50%;
        width: 50%;
        display: inline-block;
        float: left;

        &.navigation-unique
        {
            max-width: 100%;
            width: 100%;
        }
    }
}

.navigation:hover
{
    @include print( $navigation-hover-map );
}

//  *******************************************************
//  ##  Specific nav buttons
//  *******************************************************

.navigation.navigation-next { right: 0px; }
.navigation.navigation-prev { left: 0px; }