/* -----------------------/*
 * Layouts CSS "Bretzel"
 * Made par Alsacréations
 * Ressources et documentation : http://bretzel.alsacreations.com/
 * Consignes : à placer dans un layer entre `reset` et `components`
 /* ---------------------- */

/* Layout-small */
.layout-small {
    --spacing-xl: 96rem; /* largeur max du layout */

    width: 100%;
    max-width: var(--spacing-xl, 80rem);
    margin-inline: auto;
}

/* Liquid */
.liquid {
    --liquid-min-margin: 1rem;
    --liquid-content: 80rem;
    --liquid-post-content: 62rem;

    display: grid;
    grid-template-columns:
        [liquid-start] minmax(var(--liquid-min-margin), 1fr)
        [content-start] minmax(0, calc(var(--liquid-content) / 2))
        [half] minmax(0, calc(var(--liquid-content) / 2))
        [content-end] minmax(var(--liquid-min-margin), 1fr)
        [liquid-end];

    :where(& > *) {
        grid-column: content;
    }
}

/* Splash et autres enfants de Liquid */
.splash {
    display: grid;
    grid-template-columns: inherit;
    grid-column: liquid;

    :where(& > *) {
        grid-column: content;
    }
}

.splash-start {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: liquid-start / content-end;

    :where(& > *) {
        grid-column: content;
    }
}

.splash-end {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: content-start / liquid-end;

    :where(& > *) {
        grid-column: content;
    }
}

.splash-half-start {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: liquid-start / half;

    :where(& > *) {
        grid-column: content-start / half;
    }
}

.splash-half-end {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: half / liquid-end;

    :where(& > *) {
        grid-column: half / content-end;
    }
}

/* Autogrid */
.autogrid {
    --autogrid-gutter: 1rem; /* gouttière */
    --col-min-size: 20rem; /* taille mini de chaque colonne */
    --grid-fill: auto-fit; /* mode de remplissage */

    display: grid;
    grid-template-columns: repeat(
        var(--grid-fill),
        minmax(min(var(--col-min-size), 100%), 1fr)
    );
    gap: var(--autogrid-gutter);

    /* Attribut pour alignement vertical */
    &[data-align="start"] {
        align-content: start;
        align-items: start;
    }
}

/* Switcher */
.switcher {
    --switcher-gutter: 1rem;

    display: grid;
    gap: var(--switcher-gutter);

    /* Attribut pour alignement vertical */
    &[data-align="start"] {
        align-content: start;
        align-items: start;
    }

    /* Multi colonnes si >768px */
    @media (width >= 48rem) {
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
    }
}

/* Cluster */
.cluster {
    --cluster-gutter: 1rem; /* gouttière */

    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gutter);
    align-items: center;

    /* Attribut pour alignement horizontal */
    &[data-align-h="end"] {
        justify-content: flex-end;
    }

    /* Attribut pour alignement vertical */
    &[data-align-v="start"] {
        align-items: flex-start;
    }

    /* Attribut pour alignement vertical */
    &[data-align-v="stretch"] {
        align-items: stretch;
    }
}

/* Repel */
.repel {
    --repel-gutter: 1rem; /* gouttière */

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--repel-gutter);

    /* Attribut pour alignement vertical */
    &[data-align-v="start"] {
        align-items: flex-start;
    }

    /* Attribut pour alignement vertical */
    &[data-align-v="stretch"] {
        align-items: stretch;
    }
}

/* Reel */
.reel {
    --reel-gutter: 1rem; /* gouttière */
    --item-size: 35%; /* largeur des enfants (% du conteneur) */

    display: flex;
    max-width: 100%;
    height: auto;
    margin-inline: auto; /* reel est centré horizontalement */
    overflow-x: auto;
    gap: var(--reel-gutter);
    scroll-snap-type: x mandatory; /* scroll-snap sur l'axe x */
    -webkit-overflow-scrolling: touch;

    :where(& > *) {
        flex-shrink: 0;
        flex-basis: var(--item-size);
    }
}

[data-scroll="start"] > * {
    scroll-snap-align: start; /* je cale à gauche */
}

[data-scroll="center"] > * {
    scroll-snap-align: center; /* je cale au centre */
}

[data-scroll="end"] > * {
    scroll-snap-align: end; /* je cale à droite */
}

[data-scrollbar="hidden"] {
    scrollbar-width: none; /* je masque l'ascenseur */

    &::-webkit-scrollbar {
        display: none; /* je masque l'ascenseur sur webkit */
    }
}

/* TwoPanes */
.twopanes {
    --twopanes-gutter: 1rem;

    display: grid;
    gap: var(--twopanes-gutter);

    /* Deux colonnes si >768px */
    @media (width >= 48rem) {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);

        /* Attribut pour permettre au 1er enfant de conserver sa taille naturelle */
        &[data-size="auto"] {
            grid-template-columns: 1fr auto;
        }

        /* Attribut pour inverser les rapports */
        &[data-direction="rtl"] {
            grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);

            &[data-size="auto"] {
                grid-template-columns: auto 1fr;
            }
        }
    }
}