/*
// Copyright 2023 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.
*/

lynx-view {
  contain: strict;
  display: none;
  width: 100%;
  container-name: lynx-view;
  container-type: inline-size;
  --rpx-unit: 1cqw;
  --ppx-unit: 1cqw;
  --vw-unit: 1vw;
  --vh-unit: 1vh;
}

lynx-view[ssr] {
  display: flex;
}

lynx-view[width="auto"] {
  --lynx-view-width: 100%;
  width: var(--lynx-view-width);
  inline-size: var(--lynx-view-width);
}

lynx-view[height="auto"],
lynx-view[width="auto"] {
  contain: content;
}

lynx-view::part(page) {
  height: 100%;
  width: 100%;
  --rpx-unit: inherit;
  --ppx-unit: inherit;
  --vw-unit: inherit;
  --vh-unit: inherit;
}

@property --rem-unit {
  syntax: "<length>";
  inherits: true;
}

@property --rpx-unit {
  syntax: "<length>";
  inherits: true;
}

@property --ppx-unit {
  syntax: "<length>";
  inherits: true;
}

@property --vw-unit {
  syntax: "<length>";
  inherits: true;
}

@property --vh-unit {
  syntax: "<length>";
  inherits: true;
}

@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;
}