/*  ==========================================================
    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-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-region="action-bar"] {
  --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-flex="paginator"] {
  --flex-gap: 1em;
}

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

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

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

[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-direction="column"] {
  --flex-direction: column;
}

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

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

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

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

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

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

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

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

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

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

[data-grid="allergen-list"] {
  --gap: 0.5em;

  & li {
    display: grid;
    grid-template-columns: 1fr 9fr;
  }
}

[data-grid="hours"] {
  grid-template-columns: 20% 70%;
}

[data-grid="extras-list"] {
  grid-template-columns: repeat(auto-fit, minmax(min(650px, 100%), 1fr));
  row-gap: 0.25em;
  column-gap: var(--space-m);

  & .extra {
    border-block-end: 1px solid oklch(var(--color-dark));

    --flex-align-items: flex-end;
    --flex-wrap: no-wrap;
  }
}

[data-grid="restaurant-element"] {
  grid-template-columns: repeat(2, 80% 15%);

  & .price {
    text-align: end;
  }
}

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

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

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

[data-grid="instagrid"] {
  --gap: 0.25em;
  
  grid-template-columns: repeat(3, 1fr);
  
  & img {
    min-inline-size: 100%;
  }
}

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

[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="medium"] {
  --flow-space: 2rem;
}

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

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

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

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

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

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

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

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

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

[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);
}

[data-clamp="3"] {
  --lines: 3;
}