@use "sass:meta";

// 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(meta.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;
}

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

/*
 * Small
 */

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

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

/*
 * Medium
 */

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

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

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

}

/*
 * Large
 */

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

.uk-section-large-top { padding-top: $section-large-padding-vertical; }
.uk-section-large-bottom { 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;
    }

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

}

/*
 * XLarge
 */

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

.uk-section-xlarge-top { padding-top: $section-xlarge-padding-vertical; }
.uk-section-xlarge-bottom { 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;
    }

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

}


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

/*
 * Default
 */

.uk-section-default {
    --uk-inverse: #{$section-default-color-mode};
    background: $section-default-background;
    @if(meta.mixin-exists(hook-section-default)) {@include hook-section-default();}
}

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

/*
 * Muted
 */

.uk-section-muted {
    --uk-inverse: #{$section-muted-color-mode};
    background: $section-muted-background;
    @if(meta.mixin-exists(hook-section-muted)) {@include hook-section-muted();}
}

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


/*
 * Primary
 */

.uk-section-primary {
    --uk-inverse: #{$section-primary-color-mode};
    background: $section-primary-background;
    @if(meta.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 {
    --uk-inverse: #{$section-secondary-color-mode};
    background: $section-secondary-background;
    @if(meta.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(meta.mixin-exists(hook-section-overlap)) {@include hook-section-overlap();}
}


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

@if(meta.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(){}