@import '~@maggioli-design-system/styles/dist/tailwind/typography.css';
@tailwind components;

/**
 * @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: theme('colors.label-sky-09');
  --mds-text-selection-color: theme('colors.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::selection {
  background-color: var(--mds-text-selection-background);
  color: var(--mds-text-selection-color);
}

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

:host([typography="snippet"]) {
  @apply text-code-snippet;
}

:host([typography="hack"]) {
  @apply text-code-hack;
}

:host([typography="h1"]) {
  @apply text-title-h1;
}

:host([typography="h2"]) {
  @apply text-title-h2;
}

:host([typography="h3"]) {
  @apply text-title-h3;
}

:host([typography="h4"]) {
  @apply text-title-h4;
}

:host([typography="h5"]) {
  @apply text-title-h5;
}

:host([typography="h6"]) {
  @apply text-title-h6;
}

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

:host([typography="action"]) {
  @apply text-title-action;
}

:host([typography="paragraph"]) {
  @apply text-info-paragraph;
}

:host([typography="detail"]) {
  @apply text-info-detail;
}

:host([typography="caption"]) {
  @apply text-info-caption;
}

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

:host([typography="label"]) {
  @apply text-info-label;
}

:host([typography="tip"]) {
  @apply text-info-tip;
}

:host([typography="option"]) {
  @apply text-info-option;
}

:host([typography="paragraph"][variant="read"]) {
  @apply text-read-paragraph;
}

:host([typography="detail"][variant="read"]) {
  @apply text-read-detail;
}

:host([typography="caption"][variant="read"]) {
  @apply text-read-caption;
}

: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"]) {
  @apply
    duration-200
    ease-in-out
    px-100
    py-25
    rounded;

  background-color: theme('colors.tone-neutral-09');
  box-shadow: theme('colors.tone-neutral-08') 0 0 0 1px;
  color: theme('colors.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;
}

@import './css/mds-text-pref-animation.css';
@import '../../tailwind/fouc.css';