/*
 * Reference specification:
 *   https://www.w3.org/TR/2024/CRD-css-conditional-3-20240815/#at-supports
 */


/* ══════════════════════════════════════════════════════════════════════════ */
/* SECTION 1 — Single <supports-decl>: basic property:value pairs           */
/* ══════════════════════════════════════════════════════════════════════════ */

/* 1a. Well-known properties and values */
@supports (display: flex) {
  .flex { display: flex }
}

@supports (display: grid) {
  .grid { display: grid }
}

@supports (display: block) {
  .block { display: block }
}

/* 1b. Properties from the specs in this test suite */
@supports (contain: layout) {
  .contained { contain: layout }
}

@supports (content-visibility: auto) {
  .cv { content-visibility: auto }
}

@supports (translate: 10px) {
  .translated { translate: 10px }
}

@supports (rotate: 45deg) {
  .rotated { rotate: 45deg }
}

@supports (scale: 2) {
  .scaled { scale: 2 }
}

@supports (grid-template-columns: subgrid) {
  .subgrid { grid-template-columns: subgrid }
}

@supports (gap: 1em) {
  .gap { gap: 1em }
}

@supports (color: oklch(0.5 0.2 30)) {
  .oklch { color: oklch(0.5 0.2 30) }
}

@supports (scrollbar-gutter: stable) {
  .sg { scrollbar-gutter: stable }
}

@supports (overflow-clip-margin: 10px) {
  .ocm { overflow-clip-margin: 10px }
}

@supports (mix-blend-mode: multiply) {
  .blend { mix-blend-mode: multiply }
}

@supports (isolation: isolate) {
  .isolated { isolation: isolate }
}

@supports (will-change: transform) {
  .wc { will-change: transform }
}

@supports (transform-style: preserve-3d) {
  .ts { transform-style: preserve-3d }
}

@supports (backface-visibility: hidden) {
  .bfv { backface-visibility: hidden }
}

/* 1c. Shorthand properties */
@supports (flex: 1) {
  .flex-1 { flex: 1 }
}

@supports (grid: none) {
  .grid-none { grid: none }
}

@supports (all: unset) {
  .reset { all: unset }
}

/* 1d. Custom properties (always syntactically valid in @supports) */
@supports (--my-var: 1) {
  .cv1 { color: var(--my-var) }
}

@supports (--color: red) {
  .cv2 { color: var(--color) }
}

/* 1e. Property with a complex multi-token value */
@supports (background: linear-gradient(to right, red, blue)) {
  .gradient { background: linear-gradient(to right, red, blue) }
}

@supports (transform: rotate(45deg) translateX(10px)) {
  .transform { transform: rotate(45deg) translateX(10px) }
}

@supports (grid-template: "a b" 100px "c d" 1fr / 1fr 1fr) {
  .gt { grid-template: "a b" 100px "c d" 1fr / 1fr 1fr }
}

@supports (color: color-mix(in oklch, red, blue)) {
  .cm { color: color-mix(in oklch, red, blue) }
}

/* 1f. var() in the tested declaration — always syntactically valid */
@supports (color: var(--missing, red)) {
  .var-color { color: var(--missing, red) }
}

@supports (width: var(--w, 100px)) {
  .var-width { width: var(--w, 100px) }
}


/* ══════════════════════════════════════════════════════════════════════════ */
/* SECTION 2 — not <supports-in-parens>                                     */
/* ══════════════════════════════════════════════════════════════════════════ */

/* 2a. not at the top level — no extra parentheses required */
@supports not (display: flex) {
  .no-flex { float: left }
}

@supports not (display: grid) {
  .no-grid { display: table }
}

@supports not (contain: layout) {
  .no-contain { overflow: hidden }
}

/* 2b. not with a complex value */
@supports not (transform: rotate(45deg) translateX(10px)) {
  .no-transform { top: 0; left: 0 }
}

/* 2c. double negation: not (not (...)) */
@supports not (not (display: flex)) {
  .double-not { display: flex }
}

/* 2d. not around a parenthesised condition */
@supports not (not (not (display: grid))) {
  .triple-not { display: grid }
}


/* ══════════════════════════════════════════════════════════════════════════ */
/* SECTION 3 — conjunction: <supports-in-parens> [ and <supports-in-parens> ]* */
/* ══════════════════════════════════════════════════════════════════════════ */

/* 3a. Two conditions */
@supports (display: flex) and (gap: 1em) {
  .flex-gap { display: flex; gap: 1em }
}

@supports (display: grid) and (grid-template-columns: subgrid) {
  .grid-subgrid { display: grid }
}

@supports (contain: layout) and (content-visibility: auto) {
  .containment { contain: layout; content-visibility: auto }
}

@supports (translate: 10px) and (rotate: 45deg) and (scale: 2) {
  .individual-transforms { translate: 10px; rotate: 45deg; scale: 2 }
}

/* 3b. Three conditions */
@supports (display: grid) and (gap: 1em) and (grid-template-columns: 1fr) {
  .grid-full { display: grid; gap: 1em; grid-template-columns: 1fr }
}

/* 3c. and with not inside parentheses */
@supports (display: grid) and (not (display: inline-grid)) {
  .grid-not-inline { display: grid }
}

@supports (display: flex) and (not (float: left)) {
  .flex-not-float { display: flex }
}

/* 3d. and with nested conditions in parentheses */
@supports ((display: grid) and (gap: 1em)) and (grid-template-columns: subgrid) {
  .nested-and { display: grid }
}


/* ══════════════════════════════════════════════════════════════════════════ */
/* SECTION 4 — disjunction: <supports-in-parens> [ or <supports-in-parens> ]* */
/* ══════════════════════════════════════════════════════════════════════════ */

/* 4a. Two conditions */
@supports (display: flex) or (display: -webkit-flex) {
  .flex-prefixed { display: flex }
}

@supports (gap: 1em) or (grid-gap: 1em) {
  .gap-legacy { gap: 1em }
}

@supports (color: oklch(0 0 0)) or (color: lab(0% 0 0)) {
  .color-modern { color: oklch(0 0 0) }
}

/* 4b. Three conditions */
@supports (display: flex) or (display: -webkit-flex) or (display: -ms-flexbox) {
  .flex-all-prefixes { display: flex }
}

/* 4c. or with not inside parentheses */
@supports (display: flex) or (not (float: left)) {
  .flex-or-not { display: flex }
}


/* ══════════════════════════════════════════════════════════════════════════ */
/* SECTION 5 — Mixing operators with parentheses                            */
/* 'and' and 'or' cannot be mixed at the same level; parentheses required.  */
/* ══════════════════════════════════════════════════════════════════════════ */

/* 5a. (and) or (or): outer conjunction */
@supports (display: flex) and ((gap: 1em) or (column-gap: 1em)) {
  .and-or { display: flex; gap: 1em }
}

@supports (display: grid) and ((grid-template-columns: subgrid) or (grid-template-rows: subgrid)) {
  .grid-subgrid-either { display: grid }
}

/* 5b. (or) and (and): outer disjunction */
@supports ((display: flex) and (gap: 1em)) or ((display: grid) and (gap: 1em)) {
  .flex-or-grid-with-gap { gap: 1em }
}

@supports ((display: flex) and (flex-wrap: wrap)) or (display: grid) {
  .flex-wrap-or-grid { display: grid }
}

/* 5c. not wrapping and/or groups */
@supports not ((display: flex) and (gap: 1em)) {
  .not-flex-gap { float: left }
}

@supports not ((display: grid) or (display: flex)) {
  .no-modern-layout { display: table }
}

/* 5d. Deeply nested conditions */
@supports (display: grid) and (not ((display: inline-grid) or (display: contents))) {
  .complex { display: grid }
}

@supports ((display: flex) and (gap: 1em)) or (not (float: left)) {
  .complex-2 { display: flex }
}


/* ══════════════════════════════════════════════════════════════════════════ */
/* SECTION 6 — Extra parentheses (spec explicitly allows these)             */
/* ══════════════════════════════════════════════════════════════════════════ */

@supports ((display: flex)) {
  .extra-parens-1 { display: flex }
}

@supports (((display: grid))) {
  .extra-parens-2 { display: grid }
}

@supports ((display: flex)) and ((gap: 1em)) {
  .extra-parens-and { display: flex; gap: 1em }
}

@supports ((display: flex)) or ((display: grid)) {
  .extra-parens-or { display: flex }
}


/* ══════════════════════════════════════════════════════════════════════════ */
/* SECTION 7 — !important on the tested declaration (spec §6 allows this)  */
/* "A trailing !important on a declaration being tested is allowed,         */
/*  though it won't change the validity of the declaration."                */
/* ══════════════════════════════════════════════════════════════════════════ */

@supports (display: flex !important) {
  .important-test { display: flex }
}

@supports (color: red !important) {
  .important-color { color: red }
}

@supports not (display: flex !important) {
  .not-important { float: left }
}


/* ══════════════════════════════════════════════════════════════════════════ */
/* SECTION 8 — Contents of @supports: all rule types valid inside           */
/* (at-risk per spec but valid per CRD grammar)                             */
/* ══════════════════════════════════════════════════════════════════════════ */

/* 8a. Style rules (always valid) */
@supports (display: flex) {
  .a { display: flex }
  .b { flex-direction: row }
  #c { flex-wrap: wrap }
  h1, h2 { gap: 1em }
}

/* 8b. @media nested inside @supports */
@supports (display: grid) {
  @media (min-width: 600px) {
    .layout { display: grid; grid-template-columns: repeat(3, 1fr) }
  }
}

/* 8c. @supports nested inside @supports */
@supports (display: flex) {
  @supports (gap: 1em) {
    .flex-gap { display: flex; gap: 1em }
  }
}

/* 8d. @layer nested inside @supports */
@supports (display: grid) {
  @layer grid-styles {
    .grid { display: grid }
  }
}

/* 8e. @keyframes nested inside @supports (at-risk) */
@supports (animation-name: test) {
  @keyframes slide-in {
    from { transform: translateX(-100%) }
    to   { transform: translateX(0) }
  }
  .animated { animation: slide-in 0.3s ease }
}

/* 8f. @font-face nested inside @supports (at-risk) */
@supports (display: flex) {
  @font-face {
    font-family: "MyFont";
    src: url("myfont.woff2") format("woff2");
  }
}

/* 8g. @counter-style nested inside @supports (at-risk) */
@supports (list-style-type: disc) {
  @counter-style thumbs {
    system: cyclic;
    symbols: "\1F44D";
    suffix: " ";
  }
}


/* ══════════════════════════════════════════════════════════════════════════ */
/* SECTION 9 — @supports nested inside @media                               */
/* ══════════════════════════════════════════════════════════════════════════ */

@media screen {
  @supports (display: flex) {
    .screen-flex { display: flex }
  }
}

@media (min-width: 600px) {
  @supports (display: grid) {
    .wide-grid { display: grid; grid-template-columns: repeat(3, 1fr) }
  }
  @supports not (display: grid) {
    .wide-fallback { display: flex; flex-wrap: wrap }
  }
}


/* ══════════════════════════════════════════════════════════════════════════ */
/* SECTION 10 — @supports nested inside @layer                              */
/* ══════════════════════════════════════════════════════════════════════════ */

@layer progressive {
  @supports (display: grid) {
    .layout { display: grid }
  }
}

@layer base {
  @supports (contain: layout) {
    .widget { contain: layout }
  }
}


/* ══════════════════════════════════════════════════════════════════════════ */
/* SECTION 11 — Realistic use-case patterns                                 */
/* ══════════════════════════════════════════════════════════════════════════ */

/* 11a. Progressive enhancement: flex with gap fallback */
.container { display: flex; flex-wrap: wrap; margin: -0.5em }
.container > * { margin: 0.5em }

@supports (gap: 1em) {
  .container { margin: 0; gap: 1em }
  .container > * { margin: 0 }
}

/* 11b. Grid with subgrid progressive enhancement */
@supports (display: grid) {
  .page { display: grid; grid-template-columns: 1fr 3fr }

  @supports (grid-template-columns: subgrid) {
    .page > * { display: grid; grid-template-columns: subgrid }
  }
}

/* 11c. Containment progressive enhancement */
@supports (content-visibility: auto) and (contain: layout style) {
  .offscreen { content-visibility: auto; contain: layout style }
}

/* 11d. Feature detection with negation for fallback */
@supports not (display: grid) {
  .layout { display: flex; flex-wrap: wrap }
}

@supports (display: grid) {
  .layout { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) }
}

/* 11e. Checking for individual transform properties */
@supports (translate: 0) and (rotate: 0deg) and (scale: 1) {
  .uses-individual-transforms {
    translate: 10px 20px;
    rotate: 45deg;
    scale: 1.5;
  }
}

/* 11f. Checking for color-mix() support */
@supports (color: color-mix(in srgb, red, blue)) {
  :root { --accent: color-mix(in oklch, #06c, #009 30%) }
}

/* 11g. Checking for cascade layer support */
@supports (all: revert-layer) {
  @layer base {
    .item { color: navy }
  }
}