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


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

//
// New
//

@section-border-radius:                         clamp(30px, 7.1429px + 3.5714vw, 50px); // Fluid between small and large breakpoints


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

.hook-section() {}


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

.hook-section-default() {}

.hook-section-muted() {}

.hook-section-primary() {}

.hook-section-secondary() {}


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

.hook-section-overlap() {}


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

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

    border-radius: 0 0 @section-border-radius @section-border-radius;
    position: relative;

    &:has(+ [class*="uk-section"]):nth-child(n + 1) { z-index: 13; }
    &:has(+ [class*="uk-section"]):nth-child(n + 2) { z-index: 12; }
    &:has(+ [class*="uk-section"]):nth-child(n + 3) { z-index: 11; }
    &:has(+ [class*="uk-section"]):nth-child(n + 4) { z-index: 10; }
    &:has(+ [class*="uk-section"]):nth-child(n + 5) { z-index: 9; }
    &:has(+ [class*="uk-section"]):nth-child(n + 6) { z-index: 8; }
    &:has(+ [class*="uk-section"]):nth-child(n + 7) { z-index: 7; }
    &:has(+ [class*="uk-section"]):nth-child(n + 8) { z-index: 6; }
    &:has(+ [class*="uk-section"]):nth-child(n + 9) { z-index: 5; }
    &:has(+ [class*="uk-section"]):nth-child(n + 10) { z-index: 4; }
    &:has(+ [class*="uk-section"]):nth-child(n + 11) { z-index: 3; }
    &:has(+ [class*="uk-section"]):nth-child(n + 12) { z-index: 2; }

    // :not(style, #system-message-container or both)
    & + [class*="uk-section"],
    :is(*:has(> &:last-child)) + * > [class*="uk-section"]:first-child,
    // style or message
    :is(*:has(> &:last-child)) + * > :not([class*="uk-section"]):first-child + [class*="uk-section"],
    // both
    :is(*:has(> &:last-child)) + * > :not([class*="uk-section"]):first-child + :not([class*="uk-section"]) + [class*="uk-section"] {
        margin-top: calc(-1 * @section-border-radius);
    }

    & + [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,
    :is(*:has(> &:last-child)) + * > :not([class*="uk-section"]):first-child + :not([class*="uk-section"]) + [class*="uk-section"]::before {
        content: "";
        display: block;
        height: @section-border-radius;
    }

}
