/* Copyright 2024 The Lynx Authors. All rights reserved.
 Licensed under the Apache License Version 2.0 that can be found in the
 LICENSE file in the root directory of this source tree. 
 */
@property --lynx-display {
  syntax: "linear | flex";
  inherits: false;
  initial-value: linear;
}

@property --lynx-linear-weight-sum {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

@property --lynx-linear-weight {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@property --justify-content-column {
  syntax: "flex-start|flex-end|center|space-between|space-around";
  inherits: false;
  initial-value: flex-start;
}

@property --justify-content-column-reverse {
  syntax: "flex-start|flex-end|center|space-between|space-around";
  inherits: false;
  initial-value: flex-start;
}

@property --justify-content-row {
  syntax: "flex-start|flex-end|center|space-between|space-around";
  inherits: false;
  initial-value: flex-start;
}

@property --justify-content-row-reverse {
  syntax: "flex-start|flex-end|center|space-between|space-around";
  inherits: false;
  initial-value: flex-start;
}

@property --align-self-row {
  syntax: "start|end|center|stretch|auto";
  inherits: false;
  initial-value: auto;
}

@property --align-self-column {
  syntax: "start|end|center|stretch|auto";
  inherits: false;
  initial-value: auto;
}

@property --lynx-linear-weight-basis {
  syntax: "auto|<number>|<length>";
  inherits: false;
  initial-value: auto;
}

@property --lynx-linear-orientation {
  syntax: "<custom-ident>";
  inherits: false;
  initial-value: vertical;
}

@property --flex-direction {
  syntax: "*";
  inherits: false;
}

@property --flex-wrap {
  syntax: "*";
  inherits: false;
}

@property --flex-grow {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@property --flex-shrink {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

@property --flex-basis {
  syntax: "*";
  inherits: false;
  initial-value: auto;
}

@property --flex-value {
  syntax: "*";
  inherits: false;
}

@property --flex {
  syntax: "*";
  inherits: false;
}

@property --linear-justify-content {
  syntax: "flex-start|flex-end|center|space-between|space-around";
  inherits: false;
  initial-value: flex-start;
}

x-view,
x-blur-view,
scroll-view,
x-foldview-ng,
x-foldview-slot-ng,
x-foldview-header-ng,
x-foldview-toolbar-ng,
x-foldview-drag-ng,
x-text,
inline-text,
inline-image,
inline-truncation,
x-viewpager-ng,
x-viewpager-item-ng,
x-canvas,
x-svg,
x-image,
filter-image,
x-input,
x-swiper,
x-swiper-item,
x-textarea,
x-list,
list-item {
  display: flex;
  box-sizing: border-box;
  border-width: 0px;
  position: relative;
  overflow: clip;
  min-width: 0;
  min-height: 0;
  border-style: solid;
  scrollbar-width: none;
}

x-view::--webkit-scrollbar {
  display: none;
}

/**
 * only enable this toggle logic for those container elements
 */
x-view,
scroll-view,
x-foldview-header-ng,
x-foldview-ng,
x-foldview-slot-drag-ng,
x-foldview-slot-ng,
x-foldview-toolbar-ng,
x-refresh-footer,
x-refresh-header,
x-refresh-view,
x-swiper-item,
x-viewpager-item-ng,
x-viewpager-ng,
list-item {
  /*
  --lynx-display-toggle is compile-time generated.
  */
  --lynx-display-toggle: var(--lynx-display-linear);
  --lynx-display-linear: var(--lynx-display-toggle,);
  --lynx-display-flex: var(--lynx-display-toggle,);
  /*
  --lynx-linear-orientation-toggle is compile-time generated.
  */
  --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
  --lynx-linear-orientation-horizontal: var(--lynx-linear-orientation-toggle,);
  --lynx-linear-orientation-vertical: var(--lynx-linear-orientation-toggle,);
  --lynx-linear-orientation-horizontal-reverse: var(
    --lynx-linear-orientation-toggle,
  );
  --lynx-linear-orientation-vertical-reverse: var(
    --lynx-linear-orientation-toggle,
  );

  --linear-flex-direction: var(--lynx-linear-orientation-horizontal, row) var(
    --lynx-linear-orientation-vertical,
    column
  ) var(--lynx-linear-orientation-horizontal-reverse, row-reverse) var(
    --lynx-linear-orientation-vertical-reverse,
    column-reverse
  );
  --linear-justify-content: var(
    --lynx-linear-orientation-horizontal,
    var(--justify-content-row)
  ) var(--lynx-linear-orientation-vertical, var(--justify-content-column)) var(
    --lynx-linear-orientation-horizontal-reverse,
    var(--justify-content-row-reverse)
  ) var(
    --lynx-linear-orientation-vertical-reverse,
    var(--justify-content-column-reverse)
  );
}

x-view,
x-foldview-header-ng,
x-foldview-ng,
x-foldview-slot-drag-ng,
x-foldview-slot-ng,
x-foldview-toolbar-ng,
x-refresh-footer,
x-refresh-header,
x-refresh-view,
x-swiper-item,
x-viewpager-item-ng,
x-viewpager-ng,
list-item {
  flex-wrap: var(--lynx-display-linear, nowrap)
    var(--lynx-display-flex, var(--flex-wrap));
  flex-direction: var(--lynx-display-linear, var(--linear-flex-direction))
    var(--lynx-display-flex, var(--flex-direction));
  justify-content: var(--lynx-display-linear, var(--linear-justify-content));
}

/** For @container
 *
 * when the chromuim version is less than 116.0.5806.0, the following code will crash:
 * ```
 *  <style>
      #container {
        --lynx-display: flex;
      }

      #target {
        background-color: red;
        width: 400px;
        height: 400px;
      }

      @container style(--lynx-display: flex) {
        #target {
          background-color: green;
        }
      }
    </style>
    <div id="container">
      <div id="target"></div>
    </div>
    <script>
      const target = document.getElementById('container');
      container.style.setProperty('display', 'none');
      setTimeout(() => {
        target.style.removeProperty('display');
      }, 10);
    </script>
 * ```
 * it fixed in 116.0.5806.0, detail: https://issues.chromium.org/issues/40270007
 *
 * so we limit this feature to chrome 117, safari 18, firefox no:
 * -webkit-box-reflect: chrome 4, safari 4, firefox no
 *  https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-box-reflect
 * transition-behavior:allow-discrete: chrome 117, safari 18, firefox 125
 *  https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior
 *  https://caniuse.com/mdn-css_properties_display_is_transitionable
 *
 * update this once firefox supports this.
 * 
 */
@supports (content-visibility: auto) and
  (transition-behavior: allow-discrete) and (-webkit-box-reflect: above) {
  @container style(--lynx-display: linear) {
    x-view,
    x-blur-view,
    scroll-view,
    x-foldview-ng,
    x-foldview-slot-ng,
    x-foldview-header-ng,
    x-foldview-toolbar-ng,
    x-foldview-drag-ng,
    x-text,
    inline-text,
    inline-image,
    inline-truncation,
    x-viewpager-ng,
    x-viewpager-item-ng,
    x-canvas,
    x-svg,
    x-image,
    filter-image,
    x-input,
    x-swiper,
    x-swiper-item,
    x-textarea,
    x-list,
    list-item {
      /* 
       `--lynx-linear-weight-sum`
       0 -> 1
       <value> -> <value>
       */
      flex-shrink: 0;
      /* The following `calc` and `clamp` logic ensures that if 
         `--lynx-linear-weight-sum` is zero, it defaults to 1. This prevents
         division by zero and ensures consistent behavior. */
      flex-grow: calc(
        var(--lynx-linear-weight) /
          calc(
          var(--lynx-linear-weight-sum) +
            (
            1 - clamp(0, var(--lynx-linear-weight-sum) * 999999, 1)
          )
        )
      );
      flex-basis: var(--lynx-linear-weight-basis);
    }
  }

  @container not style(--lynx-display: linear) {
    x-view,
    x-blur-view,
    scroll-view,
    x-foldview-ng,
    x-foldview-slot-ng,
    x-foldview-header-ng,
    x-foldview-toolbar-ng,
    x-foldview-drag-ng,
    x-text,
    inline-text,
    inline-image,
    inline-truncation,
    x-viewpager-ng,
    x-viewpager-item-ng,
    x-canvas,
    x-svg,
    x-image,
    filter-image,
    x-input,
    x-swiper,
    x-swiper-item,
    x-textarea,
    x-list,
    list-item {
      flex: var(--flex, var(--flex-grow) var(--flex-shrink) var(--flex-basis));
    }
  }

  @container style(--lynx-display: linear) and
    (style(--lynx-linear-orientation: vertical) or
      style(--lynx-linear-orientation: vertical-reverse)) {
    x-view,
    x-blur-view,
    scroll-view,
    x-foldview-ng,
    x-foldview-slot-ng,
    x-foldview-header-ng,
    x-foldview-toolbar-ng,
    x-foldview-drag-ng,
    x-text,
    inline-text,
    inline-image,
    inline-truncation,
    x-viewpager-ng,
    x-viewpager-item-ng,
    x-canvas,
    x-svg,
    x-image,
    filter-image,
    x-input,
    x-swiper,
    x-swiper-item,
    x-textarea,
    x-list,
    list-item {
      align-self: var(--align-self-column);
    }
  }

  @container style(--lynx-display: linear) and
    (style(--lynx-linear-orientation: horizontal) or
      style(--lynx-linear-orientation: horizontal-reverse)) {
    x-view,
    x-blur-view,
    scroll-view,
    x-foldview-ng,
    x-foldview-slot-ng,
    x-foldview-header-ng,
    x-foldview-toolbar-ng,
    x-foldview-drag-ng,
    x-text,
    inline-text,
    inline-image,
    inline-truncation,
    x-viewpager-ng,
    x-viewpager-item-ng,
    x-canvas,
    x-svg,
    x-image,
    filter-image,
    x-input,
    x-swiper,
    x-swiper-item,
    x-textarea,
    x-list,
    list-item {
      align-self: var(--align-self-row);
    }
  }
}