/** For @property
  chrome 85, edge 85, firefox 128, safari 16.4
  https://developer.chrome.com/blog/new-in-chrome-85

  * content-visibility:auto 
    chrome 85, firefox 125, safari 18
    (https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility)
  
  * contain-intrinsic-size:auto 
    chrome 83, firefox 107, safari 17
    (https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-size)

  * relative-color and  display:ruby-base
    display: ruby-base firefox-only
    background-color: rgb(from red 200 g b) firefox 127
    https://caniuse.com/?search=relative%20color#google_vignette
    https://developer.mozilla.org/en-US/docs/Web/CSS/display#browser_compatibility
  
    rules for: chrome 85, firefox 127, safari 18
 
  References:
  https://chromestatus.com/features#milestone%3D85
  https://www.mozilla.org/en-US/firefox/128.0/releasenotes/
  https://developer.apple.com/documentation/safari-release-notes/safari-16_4-release-notes
  https://caniuse.com/?search=relative%20colors
  */
@supports not
  ((content-visibility: auto) and (transition-behavior: allow-discrete) and
    (-webkit-box-reflect: above)) {
  * {
    --lynx-display: linear;
    --lynx-linear-weight-sum: 1;
    --lynx-linear-weight: 0;
    --justify-content-column: flex-start;
    --justify-content-column-reverse: flex-start;
    --justify-content-row: flex-start;
    --justify-content-row-reverse: flex-start;
    --align-self-row: auto;
    --align-self-column: auto;
    --lynx-linear-weight-basis: auto;
    --lynx-linear-orientation: vertical;
    --flex-direction: row;
    --flex-grow: 0;
    --flex-shrink: 1;
    --flex-basis: auto;
    --justify-content: flex-start;
    --flex-wrap: nowrap;
    --align-self: auto;
  }

  [lynx-computed-display="linear"] {
    flex-wrap: nowrap !important;
    flex-direction: column;
    justify-content: flex-start;
  }

  [lynx-computed-display="flex"] {
    flex-direction: var(--flex-direction);
    justify-content: var(--justify-content);
    flex-wrap: var(--flex-wrap);
  }

  [lynx-computed-display="flex"] > *,
  [lynx-computed-display="flex"] > lynx-wrapper > * {
    flex: var(--flex, var(--flex-grow) var(--flex-shrink) var(--flex-basis));
  }

  [lynx-computed-display="linear"] > *,
  [lynx-computed-display="linear"] > lynx-wrapper > * {
    flex-shrink: 0 !important;
    flex-grow: calc(
      var(--lynx-linear-weight) /
        calc(
        var(--lynx-linear-weight-sum) +
          (
          1 - clamp(0, var(--lynx-linear-weight-sum) * 999999, 1)
        )
      )
    ) !important;
    flex-basis: var(--lynx-linear-weight-basis) !important;
  }

  [lynx-computed-display="linear"][lynx-linear-orientation="vertical"] {
    flex-direction: column !important;
    justify-content: var(--justify-content-column);
  }

  [lynx-computed-display="linear"][lynx-linear-orientation="horizontal"] {
    flex-direction: row !important;
    justify-content: var(--justify-content-row);
  }

  [lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"] {
    flex-direction: column-reverse !important;
    justify-content: var(--justify-content-column-reverse);
  }

  [lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"] {
    flex-direction: row-reverse !important;
    justify-content: var(--justify-content-row-reverse);
  }

  [lynx-computed-display="linear"][lynx-linear-orientation="vertical"] > *,
  [lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"],
  [lynx-computed-display="linear"][lynx-linear-orientation="vertical"]
    > lynx-wrapper
    > *,
  [lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"]
    > lynx-wrapper
    > * {
    align-self: var(--align-self-column);
  }

  [lynx-computed-display="linear"][lynx-linear-orientation="horizontal"] > *,
  [lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"],
  [lynx-computed-display="linear"][lynx-linear-orientation="horizontal"]
    > lynx-wrapper
    > *,
  [lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"]
    > lynx-wrapper
    > * {
    align-self: var(--align-self-row);
  }
}