/*
// 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.
*/
/* :defined chrome 54,firefox 63, safari 10 */
x-text {
  display: flex;
  overflow-wrap: break-word;
  align-items: stretch;
  background-image: var(--lynx-text-bg-color);
  color: initial;
}

x-text > x-text,
x-text > lynx-wrapper > x-text {
  color: inherit;
}

x-text:not(x-text > x-text):not(x-text > lynx-wrapper > x-text) {
  --lynx-text-bg-color: initial;
}

x-text > * {
  display: none;
}

x-text::part(inner-box) {
  text-overflow: inherit;
  --lynx-text-bg-color: inherit;
}

x-text > x-text::part(inner-box),
x-text > lynx-wrapper > x-text::part(inner-box) {
  display: contents !important;
}

x-text::part(inner-box),
inline-text,
x-text::part(slot) {
  background-clip: inherit;
  -webkit-background-clip: inherit;
}

inline-text,
inline-image,
inline-truncation {
  display: none;
}

/* nested components */
x-text > x-text,
x-text > inline-text,
inline-text > inline-text,
inline-truncation > inline-text,
inline-truncation > x-text,
x-text > lynx-wrapper > x-text,
x-text > lynx-wrapper > inline-text,
x-text > lynx-wrapper > x-text,
inline-text > lynx-wrapper > inline-text,
x-text > lynx-wrapper > *,
inline-truncation > lynx-wrapper > inline-text,
inline-truncation > lynx-wrapper > x-text {
  display: inline;
  background-clip: inherit;
  -webkit-background-clip: inherit;
}

x-text > inline-image,
x-text > x-image,
inline-truncation > inline-image,
inline-truncation > x-image,
inline-text > inline-image,
inline-text > x-image,
x-text > lynx-wrapper > inline-image,
x-text > lynx-wrapper > x-image,
inline-truncation > lynx-wrapper > inline-image,
inline-truncation > lynx-wrapper > x-image,
inline-text > lynx-wrapper > inline-image,
inline-text > lynx-wrapper > x-image {
  display: contents !important;
}

x-text > x-view,
x-text > lynx-wrapper > x-view {
  display: inline-flex !important;
}

x-text > x-view,
x-text[x-show-inline-truncation] > inline-truncation,
x-text > lynx-wrapper > x-view,
x-text[x-show-inline-truncation] > lynx-wrapper > inline-truncation {
  display: inline-flex;
}

x-text > inline-truncation:first-child,
x-text > lynx-wrapper > inline-truncation:first-child {
  max-width: 100%;
}

inline-truncation ~ inline-truncation {
  display: none;
}

inline-truncation[x-text-clipped] {
  flex-direction: row;
}

inline-image::part(img) {
  display: inline-block;
  height: inherit;
  width: inherit;
  border: inherit;
  border-radius: inherit;
  background-color: inherit;
  vertical-align: inherit;
  margin: inherit;
}

x-text > x-image::part(img),
x-text > lynx-wrapper > x-image::part(img),
inline-truncation > x-image::part(img),
inline-truncation > lynx-wrapper > x-image::part(img) {
  display: inline-block;
  height: inherit !important;
  width: inherit !important;
  border: inherit;
  border-radius: inherit;
  background-color: inherit;
  vertical-align: inherit;
  margin: inherit;
  flex: inherit !important;
  object-fit: inherit;
  align-self: inherit !important;
}

/* attribute text-selection */

x-text,
inline-text,
inline-image,
inline-truncation {
  -webkit-user-select: none;
  user-select: none;
}

x-text::part(inner-box) {
  height: 100%;
  width: 100%;
  overflow: inherit;
}

x-text[text-maxline] {
  overflow: hidden;
}

x-text[text-selection],
x-text[text-selection] > inline-text,
x-text[text-selection] > x-text,
x-text[text-selection] > inline-image,
x-text[text-selection] > x-image,
x-text[text-selection] > inline-truncation,
x-text[text-selection] > lynx-wrapper > inline-text,
x-text[text-selection] > lynx-wrapper > x-text,
x-text[text-selection] > lynx-wrapper > inline-image,
x-text[text-selection] > lynx-wrapper > x-image,
x-text[text-selection] > lynx-wrapper > inline-truncation {
  -webkit-user-select: auto;
  user-select: auto;
}

x-text[x-text-clipped] > [x-text-clipped]:not(inline-truncation),
x-text[x-text-clipped]
  > lynx-wrapper
  > [x-text-clipped]:not(inline-truncation) {
  display: none !important;
}

x-text[x-text-clipped]:not([tail-color-convert="false"])::part(inner-box):after,
x-text[x-text-clipped]:not([tail-color-convert="false"])::part(inner-box)::after {
  content: "...";
}

x-text[x-text-clipped]:has(> inline-truncation)::part(inner-box):after,
x-text[x-text-clipped][x-text-custom-overflow]::part(inner-box):after,
x-text[x-text-clipped]:has(> inline-truncation)::part(inner-box)::after,
x-text[x-text-clipped][x-text-custom-overflow]::part(inner-box)::after {
  content: "" !important;
}

/* attribute text-maxline */
/* In most cases, we do not need to analyze the text layout in Javascript
 * On the following situations, we don't need to do line-clamp
 * 1. no text-maxline setting
 * 2. text-maxline is 0(display:none);
 * 
 * On the following situations, we just use the -webkit-line-clamp to implement
 * 1. without customized inline-truncation
 * 2. users do not force we apply styles on the ellipsis
 *
 * Overall, we do calculate the layout of texts with (display:block) for
 * 1. analyze the truncation length for a customized inline-truncation (attribute x-text-custom-overflow, selector :has())
 * 2. users explicit declare that we have to put the ellipsis in place. (with attribute tail-color-convert='false')
 */
/* ::part chrome 73, firefox 72, safari 13.4 */
/* :has() chrome 105, firefox 121, safari 15.1 */
x-text[text-maxline]::part(inner-box) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

x-text[text-maxline="0"] {
  display: none;
}

@supports not selector(:has(> inline-truncation)) {
  x-text[text-maxline="1"]:not([tail-color-convert="false"]):not([x-text-custom-overflow])::part(inner-box) {
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

@supports selector(:has(> inline-truncation)) {
  /* text-wrap  chrome 114, firefox 121, safari 17.4*/
  x-text[text-maxline="1"]:not([tail-color-convert="false"], :has(> inline-truncation))::part(inner-box) {
    text-wrap: nowrap;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

x-text[text-maxline="1"] {
  /* This is the stretch size */
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/max-width */
  max-width: -moz-available;
  max-width: -webkit-fill-available;
}

x-text[text-maxline="1"]:not([tail-color-convert="false"])::part(inner-box) {
  display: block;
}

x-text[text-maxline][x-text-custom-overflow]::part(inner-box),
x-text[text-maxline]:has(> inline-truncation)::part(inner-box),
x-text[text-maxline][tail-color-convert="false"]::part(inner-box) {
  display: block !important;
}

raw-text {
  display: none;
  /* raw-text only works in x-text */
  white-space-collapse: preserve-breaks;
}

x-text > raw-text,
inline-text > raw-text,
x-text > lynx-wrapper > raw-text,
inline-text > lynx-wrapper > raw-text {
  display: contents !important;
}

raw-text:not(:defined)::before,
x-text:not(:has(x-text, raw-text)):not(:defined)::before {
  content: attr(text);
  display: contents;
}