// For the vertical menu that can be used on top of the secondary column (wide & mediaum layout) or the // primary column (narrow layout). // // This menu is shown when site.data.setup.navbanner-drop-down-menu is set to 'no'. // .vmenu-container {

// Enable disable
@include medium-layout { @if $vmenu-enable-medium { display: flex; } @else { display: none; } }
@include widest-layout { @if $vmenu-enable-widest { display: flex; } @else { display: none; } }

// Ordering vertical
flex-direction: column;

// Border of the entire vmenu
@include medium-layout { border: $vmenu-border-medium; }
@include widest-layout { border: $vmenu-border-widest; }

// Backgound for the entire vmenu
@include medium-layout { background: $vmenu-background-medium; }
@include widest-layout { background: $vmenu-background-widest; }

// Box appearance for the entire vmenu
@include medium-layout { box-shadow: $vmenu-box-shadow-medium; }
@include widest-layout { box-shadow: $vmenu-box-shadow-widest; }

}

.vmenu-container .topTitle {

@include medium-layout { @if $vmenu-topTitle-enable-medium { display: flex; } @else { display: none; } }
@include widest-layout { @if $vmenu-topTitle-enable-widest { display: flex; } @else { display: none; } }

@include medium-layout { justify-content: $vmenu-topTitle-justify-content-medium; }
@include widest-layout { justify-content: $vmenu-topTitle-justify-content-widest; }

@include medium-layout { font: $vmenu-topTitle-font-medium; }
@include widest-layout { font: $vmenu-topTitle-font-widest; }

@include medium-layout { color: $vmenu-topTitle-color-medium; }
@include widest-layout { color: $vmenu-topTitle-color-widest; }

@include medium-layout { background: $vmenu-topTitle-background-medium; }
@include widest-layout { background: $vmenu-topTitle-background-widest; }

padding: 0;
margin: 0;
width: 100%;

@include medium-layout { h1 { padding: $vmenu-topTitle-padding-medium; } }
@include widest-layout { h1 { padding: $vmenu-topTitle-padding-widest; } }

@include medium-layout { h1 { margin: $vmenu-topTitle-margin-medium; } }
@include widest-layout { h1 { margin: $vmenu-topTitle-margin-widest; } }

}

.vmenu-container .vmenu {

// Stack the child elements on top of each other (the child elements are of class 'item')
display: flex;
flex-direction: column;

// The p's should not drive the display, make them as small as possible
p { margin: 0px; }

a {
        // Remove link underline
        text-decoration: none;

        // Make sure the whole width and height of the link area is clickable
        display: block;
}

// Make sure the title takes up available space (and since the link is displayed as block, this makes the
// entire area clickable.
.title { flex-grow: 1; }

.subitem {

        // Make the input checkbox invisible
        input { display: none }

        // Place the components below each other.
        display: flex;
        flex-direction: column;

        input:checked ~ {

                // Show the correct symbol for this state.
                .sub,
                .sub-hasLink,
                .sub-isActivePage  {
                        label .symbol:after { content: $vmenu-subitem-disclosure-symbol-open; }
                }

                // Show the subsub's
                .subsub,
                .subsub-hasLink,
                .subsub-isActivePage { display: flex }
        }

        input:disabled ~ {

                // Show the correct symbol for this state.
                .sub,
                .sub-hasLink,
                .sub-isActivePage  {
                        label .symbol:after { content: $vmenu-subitem-disclosure-symbol-closed; }
                }

                // Show the subsub's
                .subsub,
                .subsub-hasLink,
                .subsub-isActivePage { display: none }
        }

        .sub-isActivePage {
                 @include medium-layout { background: $vmenu-subitem-title-background-selected-medium; }
                 @include widest-layout { background: $vmenu-subitem-title-background-selected-widest; }
        }

        .sub,
        .sub-hasLink {
                // Background of the entire subitem
                @include medium-layout { background: $vmenu-subitem-background-medium; }
                @include widest-layout { background: $vmenu-subitem-background-widest; }
        }

        .sub-hasLink:hover {
                @include medium-layout { background: $vmenu-subitem-title-background-hover-medium; }
                @include widest-layout { background: $vmenu-subitem-title-background-hover-widest; }
        }

        .sub,
        .sub-hasLink,
        .sub-isActivePage {

                // Place the components next to each other
                display: flex;

                .disclosure {

                        // Center the disclosure symbol
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        // Display the proper disclosure symbol
                        .symbol:after { content: $vmenu-subitem-disclosure-symbol-closed; }
                }

                // Border of the entire subitem
                @include medium-layout { border: $vmenu-subitem-border-medium; }
                @include widest-layout { border: $vmenu-subitem-border-widest; }

                .disclosure {
                        // Create a small separator between symbol and title
                        @include medium-layout { border-right: $vmenu-subitem-disclosure-area-border-right-medium; }
                        @include widest-layout { border-right: $vmenu-subitem-disclosure-area-border-right-widest; }

                        // Create an indent that can be filled with a disclosure symbol
                        @include medium-layout { width: $vmenu-subitem-disclosure-area-width-medium; }
                        @include widest-layout { width: $vmenu-subitem-disclosure-area-width-widest; }
                }

                .title {

                        // The show-hover class is used to show hovering for non-link subitems
                        a:hover, .show-hover:hover {
                                @include medium-layout { color: $vmenu-subitem-color-hover-medium; }
                                @include widest-layout { color: $vmenu-subitem-color-hover-widest; }
                        }

                        p {
                                // Allow for some padding to position and change the size of this element
                                @include medium-layout { padding: $vmenu-subitem-title-padding-medium; }
                                @include widest-layout { padding: $vmenu-subitem-title-padding-widest; }                                

                                // Font for the sub menu title
                                @include medium-layout { font: $vmenu-subitem-font-medium; }
                                @include widest-layout { font: $vmenu-subitem-font-widest; }

                                // Color for the sub menu title
                                @include medium-layout { color: $vmenu-subitem-color-medium; }
                                @include widest-layout { color: $vmenu-subitem-color-widest; }
                        }
                }
        }

        .subsub-isActivePage {
                @include medium-layout { background: $vmenu-subsubitem-background-selected-medium; }
                @include widest-layout { background: $vmenu-subsubitem-background-selected-widest; }
        }

        .subsub,
        .subsub-hasLink {
                @include medium-layout { background: $vmenu-subsubitem-background-medium; }
                @include widest-layout { background: $vmenu-subsubitem-background-widest; }
        }

        .subsub-hasLink:hover {
                @include medium-layout { background: $vmenu-subsubitem-background-hover-medium; }
                @include widest-layout { background: $vmenu-subsubitem-background-hover-widest; }
        }

        .subsub,
        .subsub-hasLink,
        .subsub-isActivePage {

                // Not visible unless the checkbox is active
                display: none;

                // Set border and background
                @include medium-layout { border: $vmenu-subsubitem-border-medium; }
                @include widest-layout { border: $vmenu-subsubitem-border-widest; }

                .disclosure {

                        // Create a small separator between symbol and title
                        @include medium-layout { border-right: $vmenu-subsubitem-disclosure-area-border-right-medium; }
                        @include widest-layout { border-right: $vmenu-subsubitem-disclosure-area-border-right-widest; }

                        // Create an indent that can be filled with a disclosure symbol
                        @include medium-layout { width: $vmenu-subsubitem-disclosure-area-width-medium; }
                        @include widest-layout { width: $vmenu-subsubitem-disclosure-area-width-widest; }
                }

                .title {

                        a:hover {                                               
                                @include medium-layout { color: $vmenu-subsubitem-color-hover-medium; }
                                @include widest-layout { color: $vmenu-subsubitem-color-hover-widest; }
                        }

                        p {
                                // Allow for some padding to position and change the size of this element
                                @include medium-layout { padding: $vmenu-subsubitem-title-padding-medium; }
                                @include widest-layout { padding: $vmenu-subsubitem-title-padding-widest; }                             

                                // Font for the sub menu title
                                @include medium-layout { font: $vmenu-subsubitem-font-medium; }
                                @include widest-layout { font: $vmenu-subsubitem-font-widest; }

                                // Color for the sub menu title
                                @include medium-layout { color: $vmenu-subsubitem-color-medium; }
                                @include widest-layout { color: $vmenu-subsubitem-color-widest; }
                        }
                }
        }                       
}

}