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


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

//
// New
//

// Gradient
@internal-section-default-gradient:                 ~'';
@internal-section-muted-gradient:                   ~'';
@internal-section-primary-gradient:                 ~'';
@internal-section-secondary-gradient:               ~'';

// Image
@internal-section-default-image:                    ~'';
@internal-section-muted-image:                      ~'';
@internal-section-primary-image:                    ~'';
@internal-section-secondary-image:                  ~'';

// Blend mode
@internal-section-default-mode:                     none; // none, blend
@internal-section-muted-mode:                       none; // none, blend
@internal-section-primary-mode:                     none; // none, blend
@internal-section-secondary-mode:                   none; // none, blend

// Repeat
@internal-section-default-background-repeat:        repeat;
@internal-section-muted-background-repeat:          repeat;
@internal-section-primary-background-repeat:        repeat;
@internal-section-secondary-background-repeat:      repeat;

// Overlap image
@internal-section-default-overlap-image:            ~'';
@internal-section-muted-overlap-image:              ~'';
@internal-section-primary-overlap-image:            ~'';
@internal-section-secondary-overlap-image:          ~'';
@internal-section-overlap-height:                   0;
@internal-section-overlap-background-size:          ~'';


// Component
// ========================================================================

.hook-section() {}


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

//
// Default
//

// Gradient only
.hook-section-default() when not (@internal-section-default-gradient = ~'') and (@internal-section-default-image = ~'') {
    background-image: @internal-section-default-gradient;
}

// Image only
.hook-section-default() when not (@internal-section-default-image = ~'') and (@internal-section-default-gradient = ~'') {
    background-image: url("@{internal-section-default-image}");
    background-position-x: 50%;
}

// Both (Default)
.hook-section-default() when not (@internal-section-default-gradient = ~'') and not (@internal-section-default-image = ~'') and not (@internal-section-default-mode = blend) {
    background-image: url("@{internal-section-default-image}"), @internal-section-default-gradient;
    background-position-x: 50%, 0;
}

// Both (Blend)
.hook-section-default() when not (@internal-section-default-gradient = ~'') and not (@internal-section-default-image = ~'') and (@internal-section-default-mode = blend) {

    @supports (background-blend-mode: soft-light) {
        & {
            background-image: @internal-section-default-gradient, url("@{internal-section-default-image}");
            background-blend-mode: soft-light;
            background-position-x: 0, 50%;
            background-color: transparent;
        }
    }

}

// Repeat
.hook-section-default() when not (@internal-section-default-background-repeat = repeat) {
    background-repeat: @internal-section-default-background-repeat;
}

//
// Muted
//

// Gradient only
.hook-section-muted() when not (@internal-section-muted-gradient = ~'') and (@internal-section-muted-image = ~'') {
    background-image: @internal-section-muted-gradient;
}

// Image only
.hook-section-muted() when not (@internal-section-muted-image = ~'') and (@internal-section-muted-gradient = ~'') {
    background-image: url("@{internal-section-muted-image}");
    background-position-x: 50%;
}

// Both (Default)
.hook-section-muted() when not (@internal-section-muted-gradient = ~'') and not (@internal-section-muted-image = ~'') and not (@internal-section-muted-mode = blend) {
    background-image: url("@{internal-section-muted-image}"), @internal-section-muted-gradient;
    background-position-x: 50%, 0;
}

// Both (Blend)
.hook-section-muted() when not (@internal-section-muted-gradient = ~'') and not (@internal-section-muted-image = ~'') and (@internal-section-muted-mode = blend) {

    @supports (background-blend-mode: soft-light) {
        & {
            background-image: @internal-section-muted-gradient, url("@{internal-section-muted-image}");
            background-blend-mode: soft-light;
            background-position-x: 0, 50%;
            background-color: transparent;
        }
    }

}

// Repeat
.hook-section-muted() when not (@internal-section-muted-background-repeat = repeat) {
    background-repeat: @internal-section-muted-background-repeat;
}

//
// Primary
//

// Gradient only
.hook-section-primary() when not (@internal-section-primary-gradient = ~'') and (@internal-section-primary-image = ~'') {
    background-image: @internal-section-primary-gradient;
}

// Image only
.hook-section-primary() when not (@internal-section-primary-image = ~'') and (@internal-section-primary-gradient = ~'') {
    background-image: url("@{internal-section-primary-image}");
    background-position-x: 50%;
}

// Both (Default)
.hook-section-primary() when not (@internal-section-primary-gradient = ~'') and not (@internal-section-primary-image = ~'') and not (@internal-section-primary-mode = blend) {
    background-image: url("@{internal-section-primary-image}"), @internal-section-primary-gradient;
    background-position-x: 50%, 0;
}

// Both (Blend)
.hook-section-primary() when not (@internal-section-primary-gradient = ~'') and not (@internal-section-primary-image = ~'') and (@internal-section-primary-mode = blend) {

    @supports (background-blend-mode: soft-light) {
        & {
            background-image: @internal-section-primary-gradient, url("@{internal-section-primary-image}");
            background-blend-mode: soft-light;
            background-position-x: 0, 50%;
            background-color: transparent;
        }
    }

}

// Repeat
.hook-section-primary() when not (@internal-section-primary-background-repeat = repeat) {
    background-repeat: @internal-section-primary-background-repeat;
}

//
// Secondary
//

// Gradient only
.hook-section-secondary() when not (@internal-section-secondary-gradient = ~'') and (@internal-section-secondary-image = ~'') {
    background-image: @internal-section-secondary-gradient;
}

// Image only
.hook-section-secondary() when not (@internal-section-secondary-image = ~'') and (@internal-section-secondary-gradient = ~'') {
    background-image: url("@{internal-section-secondary-image}");
    background-position-x: 50%;
}

// Both (Default)
.hook-section-secondary() when not (@internal-section-secondary-gradient = ~'') and not (@internal-section-secondary-image = ~'') and not (@internal-section-secondary-mode = blend) {
    background-image: url("@{internal-section-secondary-image}"), @internal-section-secondary-gradient;
    background-position-x: 50%, 0;
}

// Both (Blend)
.hook-section-secondary() when not (@internal-section-secondary-gradient = ~'') and not (@internal-section-secondary-image = ~'') and (@internal-section-secondary-mode = blend) {

    @supports (background-blend-mode: soft-light) {
        & {
            background-image: @internal-section-secondary-gradient, url("@{internal-section-secondary-image}");
            background-blend-mode: soft-light;
            background-position-x: 0, 50%;
            background-color: transparent;
        }
    }

}

// Repeat
.hook-section-secondary() when not (@internal-section-secondary-background-repeat = repeat) {
    background-repeat: @internal-section-secondary-background-repeat;
}


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

.hook-section-overlap() when not (@internal-section-overlap-height = 0) {

    &.uk-section::after,
    & > .uk-section::after {
        content: "";
        display: block;
        height: @internal-section-overlap-height;
    }

    // :not(style, #system-message-container)
    & + [class*='uk-section'],
    :is(*:has( > &:last-child)) + * > [class*='uk-section']:first-child,
    :is(*:has( > &:last-child)) + * > :not([class*='uk-section']):first-child + [class*='uk-section'],
    .tm-has-section-overlap:not(&) + * > [class*='uk-section']:first-child,
    .tm-has-section-overlap:not(&) + * > :not([class*='uk-section']):first-child + [class*='uk-section'] { position: relative; }

    & + [class*='uk-section']::before,
    :is(*:has( > &:last-child)) + * > [class*='uk-section']:first-child::before,
    :is(*:has( > &:last-child)) + * > :not([class*='uk-section']):first-child + [class*='uk-section']::before,
    .tm-has-section-overlap:not(&) + * > [class*='uk-section']:first-child::before,
    .tm-has-section-overlap:not(&) + * > :not([class*='uk-section']):first-child + [class*='uk-section']::before {
        content: "";
        display: block;
        position: absolute;
        top: -(@internal-section-overlap-height);
        left: 0;
        right: 0;
        height: @internal-section-overlap-height;
        background-repeat: repeat-x;
    }

    &-flip.uk-section::after,
    &-flip > .uk-section::after { height: 0; }

    &-flip + [class*='uk-section']::before,
    :is(*:has( > &-flip:last-child)) + * > [class*='uk-section']:first-child::before,
    :is(*:has( > &-flip:last-child)) + * > :not([class*='uk-section']):first-child + [class*='uk-section']::before,
    .tm-has-section-overlap-flip:not(&) + * > [class*='uk-section']:first-child::before,
    .tm-has-section-overlap-flip:not(&) + * > :not([class*='uk-section']):first-child + [class*='uk-section']::before {
        top: 0;
        transform: rotate(180deg);
    }

}

.hook-section-overlap() when not (@internal-section-overlap-height = 0) and not (@internal-section-overlap-background-size = ~'') {

    & + [class*='uk-section']::before,
    :is(*:has( > &:last-child)) + * > [class*='uk-section']:first-child::before,
    :is(*:has( > &:last-child)) + * > :not([class*='uk-section']):first-child + [class*='uk-section']::before,
    .tm-has-section-overlap:not(&) + * > [class*='uk-section']:first-child::before,
    .tm-has-section-overlap:not(&) + * > :not([class*='uk-section']):first-child + [class*='uk-section']::before { background-size: @internal-section-overlap-background-size; }

}


.hook-section-overlap() when not (@internal-section-default-overlap-image = ~'') {

    & + .uk-section-default::before,
    :is(*:has( > &:last-child)) + * > .uk-section-default:first-child::before,
    :is(*:has( > &:last-child)) + * > :not([class*='uk-section']):first-child + .uk-section-default::before,
    .tm-has-section-overlap:not(&) + * > .uk-section-default:first-child::before,
    .tm-has-section-overlap:not(&) + * > :not([class*='uk-section']):first-child + .uk-section-default::before {
        .svg-fill(@internal-section-default-overlap-image, "#000", @section-default-background);
    }

}

.hook-section-overlap() when not (@internal-section-muted-overlap-image = ~'') {

    & + .uk-section-muted::before,
    :is(*:has( > &:last-child)) + * > .uk-section-muted:first-child::before,
    :is(*:has( > &:last-child)) + * > :not([class*='uk-section']):first-child + .uk-section-muted::before,
    .tm-has-section-overlap:not(&) + * > .uk-section-muted:first-child::before,
    .tm-has-section-overlap:not(&) + * > :not([class*='uk-section']):first-child + .uk-section-muted::before {
        .svg-fill(@internal-section-muted-overlap-image, "#000", @section-muted-background);
    }

}

.hook-section-overlap() when not (@internal-section-primary-overlap-image = ~'') {

    & + .uk-section-primary::before,
    :is(*:has( > &:last-child)) + * > .uk-section-primary:first-child::before,
    :is(*:has( > &:last-child)) + * > :not([class*='uk-section']):first-child + .uk-section-primary::before,
    .tm-has-section-overlap:not(&) + * > .uk-section-primary:first-child::before,
    .tm-has-section-overlap:not(&) + * > :not([class*='uk-section']):first-child + .uk-section-primary::before {
        .svg-fill(@internal-section-primary-overlap-image, "#000", @section-primary-background);
    }

}

.hook-section-overlap() when not (@internal-section-secondary-overlap-image = ~'') {

    & + .uk-section-secondary::before,
    :is(*:has( > &:last-child)) + * > .uk-section-secondary:first-child::before,
    :is(*:has( > &:last-child)) + * > :not([class*='uk-section']):first-child + .uk-section-secondary::before,
    .tm-has-section-overlap:not(&) + * > .uk-section-secondary:first-child::before,
    .tm-has-section-overlap:not(&) + * > :not([class*='uk-section']):first-child + .uk-section-secondary::before {
        .svg-fill(@internal-section-secondary-overlap-image, "#000", @section-secondary-background);
    }

}


// Miscellaneous
// ========================================================================

.hook-section-misc() {}