// ********************************************************************************************************************* // Column panel settings // ——————————————————————————————————————— //

.secondary-column {

// Use the theme insets to keep the content of the column away from the edges.
@extend .theme-insets;  

// Set the background
@include narrow-layout { background: $secondary-column-background-narrow; }
@include medium-layout { background: $secondary-column-background-medium; }
@include widest-layout { background: $secondary-column-background-widest; }

}

main {

// Use the theme insets to keep the content of the column away from the edges.
@extend .theme-insets;

// Set the background
@include narrow-layout { background: $primary-column-background-narrow; }
@include medium-layout { background: $primary-column-background-medium; }
@include widest-layout { background: $primary-column-background-widest; }

}

.tertiary-column {

// Use the theme insets to keep the content of the column away from the edges.
@extend .theme-insets;

// Set the background
@include narrow-layout { background: $tertiary-column-background-narrow; }
@include medium-layout { background: $tertiary-column-background-medium; }
@include widest-layout { background: $tertiary-column-background-widest; }

}

// The layout for the column panel is the main driver for the RWD aspects of this theme. // .column-panel {

// Layout
display: flex;

@include narrow-layout {

        // Background for the entire panel
        background: $column-panel-background-narrow;

        // This layout is column based, i.e. the content is displayed over one another.
        flex-direction: column;

        // The primary column must be displayed on top, use the 'order' property to enforce this.
        .primary-column { order: 1; }

        // The secondary column is put below the primary the second place
        .secondary-column { order: 2; }

        // Unused               
        .tertiary-column,
        .secondary-separator,
        .tertiary-separator,
        .secondary-column .vmenu-container { display: none; }
}

@include medium-layout {

        // Background for the entire panel
        background: $column-panel-background-medium;

        // This layout is row based
        flex-direction: row;

        // The secondary column uses a fixed witdh and hosts both the secondary and tertiary column content
        .secondary-column { width: $secondary-column-width; }

        // The primary column can grow
        .primary-column { flex: 1 1 auto; width: 1px; } // A width must be specified

        // Unused
        .tertiary-separator,
        .secondary-widget-separator,
        .tertiary-column,
        .primary-column .vmenu-container { display: none; }
}

@include widest-layout {

        // Background for the entire panel
        background: $column-panel-background-widest;

        // This layout is row based
        flex-direction: row;

        // The secondary and tertiary columns uses a fixed witdh 
        .secondary-column { width: $secondary-column-width; }
        .tertiary-column { width: $tertiary-column-width; }

        // The primary column can grow
        .primary-column { flex: 1 1 auto; width: 1px; } // A width must be specified

        // Unused
        .secondary-column .tertiary-column-content,
        .tertiary-widget-separator,
        .secondary-widget-separator,
        .primary-column .vmenu-container { display: none }
}

}

// The column separator .secondary-separator, .tertiary-separator {

margin-top: $column-separator-top-spacing;
margin-left: 0;
margin-bottom: $column-separator-bottom-spacing;
margin-right: 0;
@include medium-layout { border-right: 1px solid $column-separator-color-medium; }
@include widest-layout { border-right: 1px solid $column-separator-color-widest; }
@if $column-separator-display { display: block; } @else { display: none; }

}