.menubar {

// Positioning & size
@include narrow-layout { height: auto; }
@include medium-layout { height: $menubar-height-medium; }
@include widest-layout { height: $menubar-height-widest; }

// Never display input elements
input { display: none; }

@include narrow-layout {

        // Only displayed when the menu symbol is checked
        display: none;

        // Display the menu items vertically.
        flex-direction: column;

        // Appearances
        background: $menubar-background-narrow;

        // Make sure the separator is empty
        .item-separator:after { content: none; }

        // Show it as a line across the whle screen
        .item-separator {
                width: 100%;
                height: $menubar-item-separator-line-width-narrow;
                background-color: $menubar-item-separator-line-color-narrow;
        }

        .item,
        .item-narrow-only {

                // Layout
                display: flex;
                flex-direction: column;

                // Format the link (area)
                a {
                        // Make the link area as big as possible
                        width: 100%;
                        height: 100%;

                        // Remove link underlining
                        text-decoration: none;
                }

                // Implement selection changes
                input:checked ~ {

                        // Show submenu when selected
                        .dropdown, .dropdown-narrow { display: flex; }

                        // When the submenu is open, show the appropriate symbol
                        .title .symbol .code:after { content: $menubar-item-title-symbol-code-open-narrow; }
                }

                .title {

                        // Layout
                        display: flex; // Default = row layout

                        // Set the height
                        height: $menubar-item-height-narrow;

                        // Use the item color for all elements
                        background: $menubar-item-background-narrow;
                        &:hover { background: $menubar-item-background-hover-narrow; }

                        // Create the hover effect
                        &:hover { background: $menubar-item-background-hover-narrow; }

                        .symbol {

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

                                // The width of the tap area with the disclosure symbol in it
                                width: $menubar-item-disclosure-symbol-width-narrow;

                                // Load the disclosure symbol for the closed state
                                .code:after { content: $menubar-item-title-symbol-code-closed-narrow; }

                                // Show a clickable symbol over the disclosure symbol
                                .code { cursor: pointer; }
                        }

                        .text {

                                // Layout: Center vertically and justify-left
                                display: flex;
                                justify-content: start;
                                align-items: center;

                                 // Takes up remainder of .title width
                                .text { width: 100%; }

                                // Use the item color for all elements
                                p { color: $menubar-item-color-narrow; }

                                // Hover effect
                                &:hover { p { color: $menubar-item-color-hover-narrow; } }
                        }
                }

                .dropdown,
                .dropdown-narrow {

                        // Disable submenu by default
                        display: none;

                        // Subitems are stacked vertically
                        flex-direction: column;

                        .subitem-separator {
                                display: block;
                                width: 100%;
                                height: $menubar-subitem-separator-line-width-narrow;
                                background-color: $menubar-subitem-separator-line-color-narrow;
                        }

                        .subitem {

                                // If the checkbox is checked
                                input:checked ~ {

                                        // Show submenu
                                        .sub-dropdown, .sub-dropdown-narrow { display: flex; }

                                        // When the submenu is open, show the appropriate symbol
                                        .title .symbol .code:after { content: $menubar-subitem-title-symbol-code-open-narrow; }
                                }

                                .title {

                                        // Layout (row oriented)
                                        display: flex;

                                        // Appearance
                                        background: $menubar-subitem-background-narrow;
                                        &:hover { background: $menubar-subitem-background-hover-narrow; }

                                        // Height
                                        height: $menubar-subitem-height-narrow;

                                        // The disclosure symbol
                                        .symbol { width: $menubar-item-disclosure-symbol-width-narrow; }

                                        .text a {
                                                display: flex;
                                                justify-content: start;
                                                align-items: center;
                                        }

                                        p { padding-left: $menubar-subitem-indent-narrow; }
                                }

                                .sub-dropdown,
                                .sub-dropdown-narrow {

                                        // Disable by default
                                        display: none;

                                        // Subitems are stacked vertically
                                        flex-direction: column;

                                        .subsubitem-separator {
                                                display: block;
                                                width: 100%;
                                                height: $menubar-subsubitem-separator-line-width-narrow;
                                                background-color: $menubar-subsubitem-separator-line-color-narrow;
                                        }

                                        .subsubitem .title {

                                                // Layout (row oriented)
                                                display: flex;

                                                // Appearance
                                                background: $menubar-subsubitem-background-narrow;
                                                &:hover { background: $menubar-subsubitem-background-hover-narrow; }

                                                // Height
                                                height: $menubar-subsubitem-height-narrow;

                                                .text a {
                                                        display: flex;
                                                        justify-content: start;
                                                        align-items: center;
                                                }

                                                p { padding-left: $menubar-subsubitem-indent-narrow; }
                                        }
                                }
                        }
                }
        }

        .isActiveSelection {
                background: $menubar-item-background-selected-narrow;
                .title .text p { color: $menubar-item-color-selected-narrow }
        }
}

@include medium-and-widest-layout {

        // Check if it must be displayed
        @include medium-layout { @if $menubar-enabled-medium { display: flex; } @else { display: none; } }
        @include widest-layout { @if $menubar-enabled-widest { display: flex; } @else { display: none; } }

        // Appearances
        @include medium-layout {
                background: $menubar-background-medium;
                border: $menubar-border-medium;
                box-shadow: $menubar-box-shadow-medium;
        }
        @include widest-layout {
                background: $menubar-background-widest;
                border: $menubar-border-widest;
                box-shadow: $menubar-box-shadow-widest;
        }

        // Positioning of items and item-separators.
        flex-direction: row;
        @include medium-layout {
                justify-content: $menubar-justify-content-medium;
                align-items: $menubar-align-items-medium;
        }
        @include widest-layout {
                justify-content: $menubar-justify-content-widest;
                align-items: $menubar-align-items-widest;
        }

        .menubar-icon {

                @include medium-layout {
                        width: $menubar-icon-width-medium;
                        height: $menubar-icon-height-medium;
                        padding: $menubar-icon-padding-medium;
                }
                @include widest-layout {
                        width: $menubar-icon-width-widest;
                        height: $menubar-icon-height-widest;
                        padding: $menubar-icon-padding-widest;
                }
        }

        // Content (icon image)
        // Note: Firefox needs the 'after' attribute to display the icon. Other browsers seem fine without it.
        // Issue no 19.
        .menubar-icon:after {
                @include medium-layout { content: $menubar-icon-url-medium; }
                @include widest-layout { content: $menubar-icon-url-widest; }
        }

        .item-separator {

                @include medium-layout {

                        // Appearance
                        color: $menubar-item-separator-symbol-color-medium;
                        background: $menubar-item-separator-symbol-background-medium;

                        // Set padding
                        padding: $menubar-item-separator-symbol-padding-medium;

                        // Set the separator symbol
                        p:after { content: $menubar-item-separator-symbol-medium; }

                        // The font for the separator
                        p { font: $menubar-item-separator-symbol-font-medium; }
                }

                @include widest-layout {

                        // Appearance
                        color: $menubar-item-separator-symbol-color-widest;
                        background: $menubar-item-separator-symbol-background-widest;

                        // Set padding
                        padding: $menubar-item-separator-symbol-padding-widest;

                        // Set the separator symbol
                        p:after { content: $menubar-item-separator-symbol-widest; }

                        // The font for the separator
                        p { font: $menubar-item-separator-symbol-font-widest; }
                }
        }

        // Make all p's as small as possible
        p { margin: 0; padding: 0; }

        .item-narrow-only { display: none; }

        .item {

                // Vertical layout
                display: flex;
                flex-direction: column;         

                // Make this the baseline reverence for the dropdown box
                position: relative;

                // Appearances
                p {
                        // Prevent wrapping of the (sub) menu items
                        white-space: nowrap;

                        // Font color
                        @include medium-layout { color: $menubar-item-color-medium; }
                        @include widest-layout { color: $menubar-item-color-widest; }

                        // Font
                        @include medium-layout { font: $menubar-item-font-medium; }
                        @include widest-layout { font: $menubar-item-font-widest; }
                }

                // Set background
                @include medium-layout { background: $menubar-item-background-medium; }
                @include widest-layout { background: $menubar-item-background-widest; }

                // Hover effect
                &:hover {

                        // Display the submenu if the user hovers the mouse over it
                        .dropdown { display: block; }

                        p {
                                // Change font color
                                @include medium-layout { color: $menubar-item-color-hover-medium; }
                                @include widest-layout { color: $menubar-item-color-hover-widest; }
                        }

                        // Change item background
                        @include medium-layout { background: $menubar-item-background-hover-medium; }
                        @include widest-layout { background: $menubar-item-background-hover-widest; }
                }

                a {
                        // Make the entire hightlight block clickable
                        display: block;

                        // Remove the link underlining
                        text-decoration: none;
                }

                // Sizing of the items
                a, .paddingAsLink {
                        @include medium-layout { padding: $menubar-item-padding-medium; }
                        @include widest-layout { padding: $menubar-item-padding-widest; }
                }

                .title {                
                        @include medium-layout { height: $menubar-item-height-medium; }
                        @include widest-layout { height: $menubar-item-height-widest; }
                }

                .dropdown,
                .dropdown-narrow {

                        // Visibility depends on hovering over the item
                        display: none;

                        // Don't show the separators
                        .subitem-separator { display: none; }

                        // Position the dropdown box below the item.
                        position: absolute;
                        top: 100%;

                        // Make it at least as wide as the parent                                               
                        min-width: 100%;

                        // Appearances
                        @include medium-layout { margin: $menubar-dropdown-margin-medium; }
                        @include widest-layout { margin: $menubar-dropdown-margin-widest; }

                        @include medium-layout { padding: $menubar-dropdown-padding-medium; }
                        @include widest-layout { padding: $menubar-dropdown-padding-widest; }

                        @include medium-layout { background: $menubar-dropdown-background-medium; }
                        @include widest-layout { background: $menubar-dropdown-background-widest; }

                        @include medium-layout { border: $menubar-dropdown-border-medium; }
                        @include widest-layout { border: $menubar-dropdown-border-widest; }

                        @include medium-layout { box-shadow: $menubar-dropdown-box-shadow-medium; }
                        @include widest-layout { box-shadow: $menubar-dropdown-box-shadow-widest; }

                        .subitem {

                                // To anchor the sub-dropdown
                                position: relative;

                                // Appearances
                                p {
                                        @include medium-layout { font: $menubar-subitem-font-medium; }
                                        @include widest-layout { font: $menubar-subitem-font-widest; }

                                        @include medium-layout { color: $menubar-subitem-color-medium; }
                                        @include widest-layout { color: $menubar-subitem-color-widest; }
                                }

                                @include medium-layout { background: $menubar-subitem-background-medium; }
                                @include widest-layout { background: $menubar-subitem-background-widest; }

                                // Hover effect
                                &:hover {

                                        // Show the sub-dropdown only on hover
                                        .sub-dropdown { display: flex; }

                                        p {
                                                @include medium-layout { color: $menubar-subitem-color-hover-medium; }
                                                @include widest-layout { color: $menubar-subitem-color-hover-widest; }
                                        }

                                        @include medium-layout { background: $menubar-subitem-background-hover-medium; }
                                        @include widest-layout { background: $menubar-subitem-background-hover-widest; }
                                }

                                // Sizing of the subitems
                                a, .paddingAsLink {
                                        @include medium-layout { padding: $menubar-subitem-padding-medium; }
                                        @include widest-layout { padding: $menubar-subitem-padding-widest; }
                                }

                                .sub-dropdown {

                                        // Do not display (until hover over the subitem)
                                        display: none;

                                        // Position it relative to the subitem
                                        position: absolute;

                                        // Position it adjacent to the subitem
                                        top: 0;
                                        left: 100%;

                                        // Make it at least as wide as the parent                                               
                                        min-width: 100%;

                                        // Stack the sub-sub item vertically
                                        flex-direction: column;

                                        // Formatting the appearance
                                        @include medium-layout { background: $menubar-sub-dropdown-background-medium; }
                                        @include widest-layout { background: $menubar-sub-dropdown-background-widest; }

                                        @include medium-layout { border: $menubar-sub-dropdown-border-medium; }
                                        @include widest-layout { border: $menubar-sub-dropdown-border-widest; }

                                        @include medium-layout { box-shadow: $menubar-sub-dropdown-box-shadow-medium; }
                                        @include widest-layout { box-shadow: $menubar-sub-dropdown-box-shadow-widest; }

                                        .subsubitem {

                                                // Appearance
                                                p {
                                                        @include medium-layout { font: $menubar-subsubitem-font-medium; }
                                                        @include widest-layout { font: $menubar-subsubitem-font-widest; }

                                                        @include medium-layout { color: $menubar-subsubitem-color-medium; }
                                                        @include widest-layout { color: $menubar-subsubitem-color-widest; }
                                                }

                                                @include medium-layout { background: $menubar-subsubitem-background-medium; }
                                                @include widest-layout { background: $menubar-subsubitem-background-widest; }

                                                // Hover effect
                                                &:hover {
                                                        p {
                                                                @include medium-layout { color: $menubar-subsubitem-color-hover-medium; }
                                                                @include widest-layout { color: $menubar-subsubitem-color-hover-widest; }
                                                        }

                                                        @include medium-layout { background: $menubar-subsubitem-background-hover-medium; }
                                                        @include widest-layout { background: $menubar-subsubitem-background-hover-widest; }
                                                }

                                                // Sizing of the subitems
                                                a, .paddingAsLink {
                                                        @include medium-layout { padding: $menubar-subsubitem-padding-medium; }
                                                        @include widest-layout { padding: $menubar-subsubitem-padding-widest; }
                                                }
                                        }

                                        // Show selection for pages that match a menu entry
                                        // Note that this setting overrides the setting in .subsubitem and hence be placed after it.
                                        .isActiveSelection {
                                                @include medium-layout { background: $menubar-subsubitem-background-selected-medium; }
                                                @include widest-layout { background: $menubar-subsubitem-background-selected-widest; }
                                                p {
                                                        @include medium-layout { color: $menubar-subsubitem-color-selected-medium; }
                                                        @include widest-layout { color: $menubar-subsubitem-color-selected-widest; }
                                                }
                                        }
                                }
                        }

                        // Show selection for pages that match a menu entry
                        // Note that this setting overrides the setting in .subitem and hence be placed after it.
                        .isActiveSelection {
                                @include medium-layout { background: $menubar-subitem-background-selected-medium; }
                                @include widest-layout { background: $menubar-subitem-background-selected-widest; }
                                p {
                                        @include medium-layout { color: $menubar-subitem-color-selected-medium; }
                                        @include widest-layout { color: $menubar-subitem-color-selected-widest; }
                                }
                        }
                }
        }       

        // Show selection for pages that match a menu entry
        // Note that this setting overrides the setting in .item and hence be placed after it.
        .isActiveSelection {
                @include medium-layout { background: $menubar-item-background-selected-medium; }
                @include widest-layout { background: $menubar-item-background-selected-widest; }
                p {
                        @include medium-layout { color: $menubar-item-color-selected-medium; }
                        @include widest-layout { color: $menubar-item-color-selected-widest; }
                }
        }
}

}