/**
 * @prop --mds-text-animation-placeholder-char: Sets the animation placeholder char of the text when `animation` attribute is set to `yugop`
 * @prop --mds-text-animation-speed: Sets the animation speed of the text when `animation` attribute is set to `yugop`
 * @prop --mds-text-line-clamp: Sets the max number of visible lines before the text overflows with ellipsis. It works only if attribute `truncate='all' is set`. **WARNING:** this is supported only by Chrome, Safare and Firefox with native browser prefixes.
 * @prop --mds-text-selection-background: Sets the background-color of the text when the text is selected
 * @prop --mds-text-selection-color: Sets the color of the text when the text is selected
 */

:host {
  --mds-text-selection-background: rgb(var(--label-sky-09));
  --mds-text-selection-color: rgb(var(--label-sky-01));
  --mds-text-line-clamp: 3;
  --mds-text-animation-speed: 0.5;
  --mds-text-animation-placeholder-char: " ";

  display: flex;
  min-width: 0;
}

.text::-moz-selection {
  background-color: var(--mds-text-selection-background);
  color: var(--mds-text-selection-color);
}

.text::selection {
  background-color: var(--mds-text-selection-background);
  color: var(--mds-text-selection-color);
}

.text {
  cursor: inherit;
  display: inherit;
}

:host([typography="snippet"]) {
  min-height: 1.5rem;
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-size: 1rem;
  line-height: 1.5rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:host([typography="hack"]) {
  min-height: 1.25rem;
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-size: 0.875rem;
  line-height: 1.25rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:host([typography="h1"]) {
  min-height: 3rem;
  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 3rem;
  line-height: 3rem;
  letter-spacing: -0.025em;
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:host([typography="h2"]) {
  min-height: 2.5rem;
  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 2.25rem;
  line-height: 2.5rem;
  letter-spacing: -0.025em;
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:host([typography="h3"]) {
  min-height: 2.25rem;
  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.875rem;
  line-height: 2.25rem;
  letter-spacing: -0.025em;
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:host([typography="h4"]) {
  min-height: 2rem;
  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: -0.025em;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:host([typography="h5"]) {
  min-height: 1.75rem;
  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.25rem;
  line-height: 1.75rem;
  letter-spacing: -0.025em;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:host([typography="h6"]) {
  min-height: 1.5rem;
  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: -0.025em;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:host([typography="h1"]),
:host([typography="h2"]),
:host([typography="h3"]),
:host([typography="h4"]),
:host([typography="h5"]),
:host([typography="h6"]) {
  text-wrap: balance;
}

:host([typography="action"]) {
  min-height: 1.5rem;
  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  line-height: 1.5rem;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:host([typography="paragraph"]) {
  min-height: 2rem;
  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.25rem;
  line-height: 2rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:host([typography="detail"]) {
  min-height: 1.5rem;
  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:host([typography="caption"]) {
  min-height: 1.25rem;
  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:host([typography="paragraph"]),
:host([typography="detail"]),
:host([typography="caption"]) {
  text-wrap: pretty;
}

:host([typography="label"]) {
  min-height: 1rem;
  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:host([typography="tip"]) {
  min-height: 1rem;
  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:host([typography="option"]) {
  min-height: 0.625rem;
  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.625rem;
  line-height: 0.625rem;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:host([typography="paragraph"][variant="read"]) {
  min-height: 2rem;
  font-family: 'Merriweather', Times, 'Times New Roman', serif;
  font-size: 1.25rem;
  line-height: 2rem;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:host([typography="detail"][variant="read"]) {
  min-height: 1.5rem;
  font-family: 'Merriweather', Times, 'Times New Roman', serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:host([typography="caption"][variant="read"]) {
  min-height: 1.25rem;
  font-family: 'Merriweather', Times, 'Times New Roman', serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:host([tag="article"]),
:host([tag="blockquote"]),
:host([tag="dd"]),
:host([tag="details"]),
:host([tag="div"]),
:host([tag="dl"]),
:host([tag="dt"]),
:host([tag="figcaption"]),
:host([tag="h1"]),
:host([tag="h2"]),
:host([tag="h3"]),
:host([tag="h4"]),
:host([tag="h5"]),
:host([tag="h6"]),
:host([tag="label"]),
:host([tag="legend"]),
:host([tag="li"]),
:host([tag="ol"]),
:host([tag="p"]),
:host([tag="pre"]),
:host([tag="summary"]),
:host([tag="ul"]) {
  display: block;
}

:host([tag="abbr"]),
:host([tag="address"]),
:host([tag="b"]),
:host([tag="bdo"]),
:host([tag="cite"]),
:host([tag="code"]),
:host([tag="del"]),
:host([tag="dfn"]),
:host([tag="em"]),
:host([tag="i"]),
:host([tag="ins"]),
:host([tag="kbd"]),
:host([tag="mark"]),
:host([tag="q"]),
:host([tag="rb"]),
:host([tag="rt"]),
:host([tag="ruby"]),
:host([tag="s"]),
:host([tag="samp"]),
:host([tag="small"]),
:host([tag="span"]),
:host([tag="strong"]),
:host([tag="sub"]),
:host([tag="sup"]),
:host([tag="time"]),
:host([tag="u"]),
:host([tag="var"]) {
  display: inline;
}

:host([tag="code"]) {
  border-radius: 0.25rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.0625rem;
  padding-bottom: 0.0625rem;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  background-color: rgb(var(--tone-neutral-09));
  box-shadow: rgb(var(--tone-neutral-08)) 0 0 0 1px;
  color: rgb(var(--tone-neutral-03));
  transition-property: color, background-color;
}

:host([truncate]) .text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

:host([truncate="word"]) .text {
  white-space: nowrap;
}

@supports (line-clamp: 1) {
  :host([truncate="all"]) .text {
    line-clamp: var(--mds-text-line-clamp, 1);
  }
}

@supports (display: -webkit-box) {
  :host([truncate="all"]) .text {
    -webkit-box-orient: vertical;

    /* stylelint-disable-next-line value-no-vendor-prefix */
    display: -webkit-box;
    -webkit-line-clamp: var(--mds-text-line-clamp, 1);
  }
}

abbr,
address,
article,
b,
bdo,
blockquote,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
figcaption,
h1,
h2,
h3,
h4,
h5,
h6,
i,
ins,
kbd,
label,
legend,
li,
mark,
ol,
p,
pre,
q,
rb,
rt,
ruby,
s,
samp,
small,
span,
strong,
sub,
summary,
sup,
time,
u,
ul,
var,
wbr {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  overflow: inherit;
  text-overflow: inherit;
}

:host-context(.pref-animation-reduce) {
  transition-duration: 0s;
}

@media (prefers-reduced-motion) {
  :host-context(.pref-animation-system) {
    transition-duration: 0s;
  }
}

:host(:not(:is([hydrated], .hydrated))) {
  animation-duration: 0s;
  border-color: transparent;
  box-shadow: 0 0 0 transparent;
  opacity: 0;
  outline-color: transparent;
  transition-delay: 0s;
  transition-duration: 0s;
  visibility: hidden;
}

/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */

mds-accordion:not(:is([hydrated], .hydrated)),
mds-accordion-item:not(:is([hydrated], .hydrated)),
mds-accordion-timer:not(:is([hydrated], .hydrated)),
mds-accordion-timer-item:not(:is([hydrated], .hydrated)),
mds-author:not(:is([hydrated], .hydrated)),
mds-avatar:not(:is([hydrated], .hydrated)),
mds-badge:not(:is([hydrated], .hydrated)),
mds-banner:not(:is([hydrated], .hydrated)),
mds-benchmark-bar:not(:is([hydrated], .hydrated)),
mds-bibliography:not(:is([hydrated], .hydrated)),
mds-breadcrumb:not(:is([hydrated], .hydrated)),
mds-breadcrumb-item:not(:is([hydrated], .hydrated)),
mds-button:not(:is([hydrated], .hydrated)),
mds-card:not(:is([hydrated], .hydrated)),
mds-card-content:not(:is([hydrated], .hydrated)),
mds-card-footer:not(:is([hydrated], .hydrated)),
mds-card-header:not(:is([hydrated], .hydrated)),
mds-card-media:not(:is([hydrated], .hydrated)),
mds-chip:not(:is([hydrated], .hydrated)),
mds-details:not(:is([hydrated], .hydrated)),
mds-dropdown:not(:is([hydrated], .hydrated)),
mds-entity:not(:is([hydrated], .hydrated)),
mds-file:not(:is([hydrated], .hydrated)),
mds-file-preview:not(:is([hydrated], .hydrated)),
mds-filter:not(:is([hydrated], .hydrated)),
mds-filter-item:not(:is([hydrated], .hydrated)),
mds-header:not(:is([hydrated], .hydrated)),
mds-header-bar:not(:is([hydrated], .hydrated)),
mds-help:not(:is([hydrated], .hydrated)),
mds-horizontal-scroll:not(:is([hydrated], .hydrated)),
mds-hr:not(:is([hydrated], .hydrated)),
mds-icon:not(:is([hydrated], .hydrated)),
mds-img:not(:is([hydrated], .hydrated)),
mds-input:not(:is([hydrated], .hydrated)),
mds-input-field:not(:is([hydrated], .hydrated)),
mds-input-range:not(:is([hydrated], .hydrated)),
mds-input-select:not(:is([hydrated], .hydrated)),
mds-input-switch:not(:is([hydrated], .hydrated)),
mds-input-tip:not(:is([hydrated], .hydrated)),
mds-input-tip-item:not(:is([hydrated], .hydrated)),
mds-input-upload:not(:is([hydrated], .hydrated)),
mds-keyboard:not(:is([hydrated], .hydrated)),
mds-keyboard-key:not(:is([hydrated], .hydrated)),
mds-kpi:not(:is([hydrated], .hydrated)),
mds-kpi-item:not(:is([hydrated], .hydrated)),
mds-label:not(:is([hydrated], .hydrated)),
mds-list:not(:is([hydrated], .hydrated)),
mds-list-item:not(:is([hydrated], .hydrated)),
mds-modal:not(:is([hydrated], .hydrated)),
mds-note:not(:is([hydrated], .hydrated)),
mds-notification:not(:is([hydrated], .hydrated)),
mds-paginator:not(:is([hydrated], .hydrated)),
mds-paginator-item:not(:is([hydrated], .hydrated)),
mds-pref:not(:is([hydrated], .hydrated)),
mds-pref-animation:not(:is([hydrated], .hydrated)),
mds-pref-consumption:not(:is([hydrated], .hydrated)),
mds-pref-contrast:not(:is([hydrated], .hydrated)),
mds-pref-language:not(:is([hydrated], .hydrated)),
mds-pref-language-item:not(:is([hydrated], .hydrated)),
mds-pref-theme:not(:is([hydrated], .hydrated)),
mds-price-table:not(:is([hydrated], .hydrated)),
mds-price-table-features:not(:is([hydrated], .hydrated)),
mds-price-table-features-cell:not(:is([hydrated], .hydrated)),
mds-price-table-features-row:not(:is([hydrated], .hydrated)),
mds-price-table-header:not(:is([hydrated], .hydrated)),
mds-price-table-list:not(:is([hydrated], .hydrated)),
mds-price-table-list-item:not(:is([hydrated], .hydrated)),
mds-progress:not(:is([hydrated], .hydrated)),
mds-push-notification:not(:is([hydrated], .hydrated)),
mds-push-notifications:not(:is([hydrated], .hydrated)),
mds-quote:not(:is([hydrated], .hydrated)),
mds-separator:not(:is([hydrated], .hydrated)),
mds-spinner:not(:is([hydrated], .hydrated)),
mds-stepper-bar:not(:is([hydrated], .hydrated)),
mds-stepper-bar-item:not(:is([hydrated], .hydrated)),
mds-tab:not(:is([hydrated], .hydrated)),
mds-tab-bar:not(:is([hydrated], .hydrated)),
mds-tab-bar-item:not(:is([hydrated], .hydrated)),
mds-tab-item:not(:is([hydrated], .hydrated)),
mds-table:not(:is([hydrated], .hydrated)),
mds-table-body:not(:is([hydrated], .hydrated)),
mds-table-cell:not(:is([hydrated], .hydrated)),
mds-table-footer:not(:is([hydrated], .hydrated)),
mds-table-header:not(:is([hydrated], .hydrated)),
mds-table-header-cell:not(:is([hydrated], .hydrated)),
mds-table-row:not(:is([hydrated], .hydrated)),
mds-text:not(:is([hydrated], .hydrated)),
mds-toast:not(:is([hydrated], .hydrated)),
mds-tooltip:not(:is([hydrated], .hydrated)),
mds-tree:not(:is([hydrated], .hydrated)),
mds-tree-item:not(:is([hydrated], .hydrated)),
mds-url-view:not(:is([hydrated], .hydrated)),
mds-usage:not(:is([hydrated], .hydrated)),
mds-video-wall:not(:is([hydrated], .hydrated)),
mds-zero:not(:is([hydrated], .hydrated))
{
  animation-duration: 0s;
  border-color: transparent;
  box-shadow: 0 0 0 transparent;
  opacity: 0;
  outline-color: transparent;
  transition-delay: 0s;
  transition-duration: 0s;
  visibility: hidden;
}