// Name:            Section
// Description:     Component to create horizontal layout section
//
// Component:       `uk-section`
//
// Modifiers:       `uk-section-xsmall`
//                  `uk-section-small`
//                  `uk-section-large`
//                  `uk-section-xlarge`
//                  `uk-section-default`
//                  `uk-section-muted`
//                  `uk-section-primary`
//                  `uk-section-secondary`
//                  `uk-section-overlap`
//
// States:          `uk-preserve-color`
//
// ========================================================================


// Variables
// ========================================================================











/* ========================================================================
   Component: Section
 ========================================================================== */

/*
 * 1. Make it work with `100vh` and height in general
 */

.uk-section {
    display: flow-root;
    box-sizing: border-box; /* 1 */
    padding-top: $section-padding-vertical;
    padding-bottom: $section-padding-vertical;
    @if(mixin-exists(hook-section)) {@include hook-section();}
}

/* Desktop and bigger */
@media (min-width: $breakpoint-medium) {

    .uk-section {
        padding-top: $section-padding-vertical-m;
        padding-bottom: $section-padding-vertical-m;
    }

}

/*
 * Remove margin from the last-child
 */

.uk-section > :last-child { margin-bottom: 0; }


/* Size modifiers
 ========================================================================== */

/*
 * XSmall
 */

.uk-section-xsmall {
    padding-top: $section-xsmall-padding-vertical;
    padding-bottom: $section-xsmall-padding-vertical;
}

/*
 * Small
 */

.uk-section-small {
    padding-top: $section-small-padding-vertical;
    padding-bottom: $section-small-padding-vertical;
}

/*
 * Large
 */

.uk-section-large {
    padding-top: $section-large-padding-vertical;
    padding-bottom: $section-large-padding-vertical;
}

/* Tablet landscape and bigger */
@media (min-width: $breakpoint-medium) {

    .uk-section-large {
        padding-top: $section-large-padding-vertical-m;
        padding-bottom: $section-large-padding-vertical-m;
    }

}


/*
 * XLarge
 */

.uk-section-xlarge {
    padding-top: $section-xlarge-padding-vertical;
    padding-bottom: $section-xlarge-padding-vertical;
}

/* Tablet landscape and bigger */
@media (min-width: $breakpoint-medium) {

    .uk-section-xlarge {
        padding-top: $section-xlarge-padding-vertical-m;
        padding-bottom: $section-xlarge-padding-vertical-m;
    }

}


/* Style modifiers
 ========================================================================== */

/*
 * Default
 */

.uk-section-default {
    background: $section-default-background;
    @if(mixin-exists(hook-section-default)) {@include hook-section-default();}
}

/*
 * Muted
 */

.uk-section-muted {
    background: $section-muted-background;
    @if(mixin-exists(hook-section-muted)) {@include hook-section-muted();}
}

/*
 * Primary
 */

.uk-section-primary {
    background: $section-primary-background;
    @if(mixin-exists(hook-section-primary)) {@include hook-section-primary();}
}

@if ( $section-primary-color-mode == light ) { .uk-section-primary:not(.uk-preserve-color) { @extend .uk-light !optional;} }
@if ( $section-primary-color-mode == dark ) { .uk-section-primary:not(.uk-preserve-color) { @extend .uk-dark !optional;} }

/*
 * Secondary
 */

.uk-section-secondary {
    background: $section-secondary-background;
    @if(mixin-exists(hook-section-secondary)) {@include hook-section-secondary();}
}

@if ( $section-secondary-color-mode == light ) { .uk-section-secondary:not(.uk-preserve-color) { @extend .uk-light !optional;} }
@if ( $section-secondary-color-mode == dark ) { .uk-section-secondary:not(.uk-preserve-color) { @extend .uk-dark !optional;} }


/* Overlap modifier
 ========================================================================== */

/*
 * Reserved modifier to make a section overlap another section with an border image
 * Implemented by the theme
 */

.uk-section-overlap {
    @if(mixin-exists(hook-section-overlap)) {@include hook-section-overlap();}
}


// Hooks
// ========================================================================

@if(mixin-exists(hook-section-misc)) {@include hook-section-misc();}

// @mixin hook-section(){}
// @mixin hook-section-default(){}
// @mixin hook-section-muted(){}
// @mixin hook-section-secondary(){}
// @mixin hook-section-primary(){}
// @mixin hook-section-overlap(){}
// @mixin hook-section-misc(){}