/*  ==========================================================
    EXCEPTIONS
    ========================================================== */

/**
 * Exceptions are tiny variations to block elements, and are used for handling state changes to elements.
 * We add those exception by defining a data attribute in the HTML tag
 * 
 * # What should an exception do?
 *   - Provide a concise variation to a block
 *   - Use data attributes
 *
 * # What shouldn’t an exception do?
 *   - Variate a block to the point where it isn’t recognisable anymore. This is where a new block should be created
 *   - Use CSS classes
 */

[data-flex="paginator"] {
    --flex-gap: 1em;
}

[data-flex="paginator"] .btn.active {
    background: hsl(var(--color-primary));
    color: hsl(var(--color-light));
}

[data-region="header"] {
	--padding-block-start: var(--space-2xs);
	--padding-inline-end: var(--space-s-5xl);
	--padding-block-end: var(--space-2xs);
	--padding-inline-start: var(--space-s-5xl);
}

[data-grid="col-wide"] {
	--grid-min-item-size: 22rem;
}

[data-grid="has-cards"] {
    --grid-placement: auto-fill;
	--grid-min-item-size: 20rem;
}

[data-grid="has-form"] {
	--grid-justify-items: start;
}

[data-grid="gallery"] {
	--gap: 0.5em;
	--grid-placement: auto-fill;
}

[data-justify-items="center"] {
  --grid-justify-items: center;
  --gap: 2em;
}

[data-flex="form"] {
	--flex-justify-content: stretch;
}

[data-flex="column"] {
	--flex-direction: column;
}

[data-flex="justify-start"] {
    --flex-justify-content: flex-start;
}

[data-flow="inverse"] {
	--flow-space: var(--inverse-clamp);
}

[data-flow="gutter"] {
	--flow-space: var(--grid-gutter);
}

[data-flow="xs"] {
	--flow-space: 0.25em;
}

[data-flow="xs-inside"] > * {
	--flow-space: 0.25rem;
}

[data-flow="small"] {
	--flow-space: 0.5em;
}

[data-flow="small-inside"] > * {
	--flow-space: 0.5rem;
}

[data-flow="normal"] {
	--flow-space: 1rem;
}

[data-flow="normal-inside"] > * {
	--flow-space: 1rem;
}

[data-flow="large"] {
	--flow-space: 3em;
}

[data-flow="xl"] {
	--flow-space: 5em;
}

[data-flow="form"] {
	--flow-space: 1.25em;

	& > * > * + * {
		--flow-space: 0.25em;
	}
}

[data-gap="inverse"] {
	--flex-gap: var(--inverse-clamp);
}

[data-gap="small"] {
	--flex-gap: var(--space-s);
}

[data-flex="slider"] {
	--flex-direction: column;
	--flex-align-items: flex-start;
}

[data-boxed="h1"] {
	--biggest-element-font-size: var(--step-5);
}

[data-boxed="h2"] {
	--biggest-element-font-size: var(--step-4);
}

[data-boxed="h3"] {
	--biggest-element-font-size: var(--step-3);
}

[data-boxed="h4"] {
	--biggest-element-font-size: var(--step-2);
}

[data-boxed="h5"] {
	--biggest-element-font-size: var(--step-1);
}