/*  ==========================================================
    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
 *
 *   - 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-region="header"] {
  --padding-block-start: var(--space-s) !important;
  --padding-block-end: var(--space-s) !important;
}

[data-region="large-block"] {
  --padding-block-start: var(--space-l) !important;
  --padding-block-end: var(--space-l) !important;
}

/* ? Regions Background */
[data-bg="darkest"] {
  background-color: oklch(var(--color-darkest));
}

[data-bg="primary"] {
  position: relative;
  color: oklch(var(--color-dark));
  z-index: 1;

  &::before, &::after {
      content: "";
      position: absolute;
      inset: 0;
  }
  
  &::before {
    background: url("/img/sfondo-marmo.jpg?m=crop&w=2545&h=754&q=10") center/cover;
    filter: contrast(250%);
    z-index: -2;
  }
  
  &::after {
    background: linear-gradient(oklch(var(--color-primary) / 0.95));
    z-index: -1;
  }
}

[data-radial-position="center"] {
  --radial-gradient-center: center;
}

/* ? Flex */
[data-flex-justify="between"] {
  --flex-justify-content: space-between;
}

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

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

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

[data-flex-align="items-stretch"] {
  --flex-align-items: stretch;
}

[data-flex-align="items-center"] {
  --flex-align-items: center;
}

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

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

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

[data-flex="footer-top"] {
  --flex-justify-content: space-between;
  --flex-align-items: flex-start;
}

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

[data-flex-wrap="nowrap"] {
  --flex-wrap: nowrap;
}

[data-justify-self="end"] {
  justify-self: flex-end !important;
}

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

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

/* ? Grid */
[data-grid-items="align-center"] {
  --grid-align-items: center;
}

[data-grid-items="align-start"] {
  --grid-align-items: start;
}

[data-grid-content="align-start"] {
  --grid-align-content: start;
}

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

[data-align-items="end"] {
  --grid-align-items: end;
}

[data-align-self="center"] {
  align-self: center;
}

[data-align-self="end"] {
  align-self: end;
}

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

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

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

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

[data-grid="50-50"] {
  --grid-min-item-size: 45rem;
}

[data-grid="single-col"] {
  --grid-min-item-size: 100vw;
  --grid-align-items: start;
}

[data-grid-col="single"] {
  grid-template-columns: auto;
}

/* ? Gap */
/* Flex gap */
[data-flex-gap="inverse"] {
  --flex-gap: var(--inverse-clamp);
}

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

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

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

[data-flex-gap="normal"] {
  --flex-gap: var(--grid-gutter);
}

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

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

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

[data-flex-gap="none"] {
  --flex-gap: 0;
}

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

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

[data-gap="2xl-8xl"] {
  --gap: calc(2 * var(--space-xl-4xl));
}

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

[data-gap="3xl"] {
  --gap: var(--space-3xl);
}

[data-gap="normal"] {
  --gap: var(--grid-gutter);
}

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

[data-gap="0.5em"] {
  --gap: 0.5em;
}

[data-gap="none"] {
  --gap: 0;
}

[data-subgrid-gap="large"] {
  --subgrid-gap: 2em;
}

[data-subgrid-gap="normal"] {
  --subgrid-gap: 1em;
}

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

[data-flow="inverse-inside"] > * {
  --flex-gap: var(--inverse-clamp);
  --gap: 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="xs-inside"] > .btn {
    --flow-space: 1.75em;
}

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

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

[data-flow="small-inside"] > .btn {
    --flow-space: 1.75em;
}

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

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

[data-flow="normal-inside"] > .btn {
    --flow-space: 1.75em;
}

[data-flow="medium"] {
  --flow-space: 2em;
}

[data-flow="medium-inside"] > * {
  --flow-space: 2em;
}

[data-flow="medium-inside"] > .btn {
    --flow-space: 2.75em;
}

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

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

[data-flow="form"] > * {
  --flow-space: 1.5em;
}

/* ? Boxed */
[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);
}

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

/* ? Clamp */
[data-lines="3"] {
  --lines: 3;
}

[data-lines="4"] {
  --lines: 4;
}

[data-lines="5"] {
  --lines: 5;
}

[data-order="alternate-child"]:nth-child(even) > :first-child {
  order: 2;
}

[data-border-width="small"] {
  --__thickness: 1px;
}