/* The fragment a QA validation points at — a box, which is why it renders as a mark and not
   through ::highlight(): the Custom Highlight API has no border of any kind.

   The shape is what distinguishes it. Every token here is a pale background wash, both spellchecks
   are underlines (ours solid, the browser's wavy), and nothing else draws an outline — so amber can
   be reused without ambiguity.

   Only `outline` may draw it. A border or padding widens the inline box and shifts every glyph
   after it, and the mirror has to line up with the transparent textarea character for character.

   Squared, like the chip: `.hwt-content mark` rounds every mirror mark 2px, which is invisible
   under a background wash but is traced by an outline and reads as a pill on a single letter. */
.hwt-content mark.qa-issue {
  /* `.hwt-content mark` paints every mirror mark's text transparent and each token rule paints its
     own back; this one only draws a box, so it has to hand the glyph back itself. */
  color: inherit;
  background: transparent;
  outline: 1px solid var(--crowdin-warning-link, #9a7a16);
  outline-offset: 0;
  border-radius: 0;
}

body.dark-theme .hwt-content mark.qa-issue {
  outline-color: var(--crowdin-warning, #cc9a06);
}

.hwt-content mark.qa-issue.qa-issue--missing-before,
.hwt-content mark.qa-issue.qa-issue--missing-after {
  position: relative;
  outline: none;
}

.hwt-content mark.qa-issue--missing-before::before,
.hwt-content mark.qa-issue--missing-after::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--crowdin-warning-link, #9a7a16);
}

body.dark-theme .hwt-content mark.qa-issue--missing-before::before,
body.dark-theme .hwt-content mark.qa-issue--missing-after::after {
  background: var(--crowdin-warning, #cc9a06);
}

.hwt-content mark.qa-issue--missing-before::before {
  inset-inline-start: -1px;
}

.hwt-content mark.qa-issue--missing-after::after {
  inset-inline-end: -1px;
}

/* The search hit on the legacy render path. `.hwt-content mark` paints every mirror mark's text
   transparent and each token rule paints its own back, so without this the matched text disappears
   instead of lighting up. Its Custom Highlight API twin is ::highlight(cwd-search-hit) below;
   the pair is theme-independent on purpose — see docs/search-highlight.md. */
.hwt-content mark.search-hit {
  color: var(--crowdin-search-hit-color, #263238);
  background-color: var(--crowdin-search-hit-bg, #ffe083);
  border-radius: 0;
}

.tag_light,
.placeholder_light,
.android_xliff_light,
.special_light,
.non_printable_light,
.br_light,
.space_light,
.tab_light,
.icu_light,
.ftl_light {
  cursor: pointer;
}

.tag_light,
.android_xliff_light {
  background: var(--crowdin-tag-bg, #FAF6D8) !important;
  color: var(--crowdin-tag-color, #787459) !important;
}

.tag_light:hover,
.android_xliff_light:hover {
  background: var(--crowdin-tag-bg-hover, #F8F0C0) !important;
  color: var(--crowdin-tag-color-hover, #4C482E) !important;
}

.icu_light,
.ftl_light {
  background: transparent!important;
}

.icu_light:hover,
.ftl_light:hover {
  background: #e5f1ee !important;
}

.icu_placeholder,
.ftl_placeholder {
  color: #2a8696 !important;
}

.icu_type {
  color: #cc427a !important
}

.icu_style {
  color: #3f5ef5 !important;
}

.icu_offset {
  color: #a353d4 !important;
}

.br_light {
  background: #a9f7aa !important;
  color: #000077 !important;
}

.placeholder_light {
  background: var(--crowdin-placeholder-light-bg) !important;
  color: var(--crowdin-placeholder-light-color) !important;
}

.special_light {
  background: var(--crowdin-special-light-bg) !important;
  color: var(--crowdin-special-light-color) !important;
}

/* The dot chip is painted as a background on the chip itself. Drawing it with a
   positioned ::before made every one of the ~22k space chips on a page a
   self-painting layer, which dominated paint time on load. The badge variants
   below draw text or a marker, which a background cannot express, so they keep
   the pseudo-element — a string holds a handful of them, not thousands.
   The padding restores the line-height-tall box the ::before used to occupy;
   an inline background otherwise covers only the font's content area. */
.non_printable_light {
  cursor: pointer;
  padding: 0.18em 0;
  padding: calc((1lh - 1.143em) / 2) 0;
  background-color: rgba(var(--crowdin-noneprintable-character-colors), 0.3);
  background-image: radial-gradient(circle closest-side,
    rgba(var(--crowdin-noneprintable-character-colors), 1) 65%,
    rgba(var(--crowdin-noneprintable-character-colors), 0) 100%);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 0.14em 0.14em;
}

.non_printable_light:hover {
  background-color: rgba(var(--crowdin-noneprintable-character-colors), 0.5);
}

/* `.hwt-content mark` rounds every mirror mark; the chip is a rectangle */
.hwt-content mark.non_printable_light {
  border-radius: 0;
}

.non_printable_lf_light,
.non_printable_crlf_light,
.non_printable_mvs_light,
.non_printable_wj_light,
.non_printable_zwj_light,
.non_printable_zwnj_light,
.non_printable_zwsp_light,
.non_printable_zwnbsp_light {
  position: relative;
  padding: 0;
  background: none;
}

.non_printable_lf_light:before,
.non_printable_crlf_light:before,
.non_printable_mvs_light:before,
.non_printable_wj_light:before,
.non_printable_zwj_light:before,
.non_printable_zwnj_light:before,
.non_printable_zwsp_light:before,
.non_printable_zwnbsp_light:before {
  background: rgba(var(--crowdin-noneprintable-character-colors), 0.3);
  content: "\00B7";
  color: rgba(var(--crowdin-noneprintable-character-colors), 1);
  position: absolute;
  top: 50%;
  transform: translate(0%,-50%);
  margin: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.non_printable_mvs_light:before,
.non_printable_wj_light:before,
.non_printable_zwj_light:before,
.non_printable_zwnj_light:before,
.non_printable_zwsp_light:before,
.non_printable_zwnbsp_light:before {
  content: '\25BE';
  top: 0;
  color: rgba(var(--crowdin-noneprintable-character-colors), .7);
  z-index: 1;
  background: transparent!important;
  transform: translate(-50%,-50%);
  left: 50%;
  right: auto;
}

.non_printable_crlf_light:before {
  content: 'CRLF';
  font-size: 10px;
  vertical-align: middle;
  letter-spacing: 1px;
  white-space: nowrap;
  top: 10px;
  border: 1px solid rgba(var(--crowdin-noneprintable-character-colors), .7);
  width: 28px;
  height: 13px;
  border-radius: 2px;
  line-height: 14px;
  left: 2px;
}

.non_printable_lf_light:before {
  content: 'LF';
  font-size: 10px;
  vertical-align: middle;
  letter-spacing: 1px;
  white-space: nowrap;
  top: 10px;
  border: 1px solid rgba(var(--crowdin-noneprintable-character-colors), 1);
  width: 20px;
  height: 13px;
  border-radius: 2px;
  line-height: 14px;
  left: 2px;
}

.non_printable_lf_light:hover:before,
.non_printable_crlf_light:hover:before,
.non_printable_mvs_light:hover:before,
.non_printable_wj_light:hover:before,
.non_printable_zwj_light:hover:before,
.non_printable_zwnj_light:hover:before,
.non_printable_zwsp_light:hover:before,
.non_printable_zwnbsp_light:hover:before {
  color: rgba(var(--crowdin-noneprintable-character-colors), 1);
  background: rgba(var(--crowdin-noneprintable-character-colors), .5);
}

.non_printable_crlf_light:hover:before,
.non_printable_lf_light:hover:before {
  background: rgba(var(--crowdin-noneprintable-character-colors), .3);
}

.space_light {
  background: rgba(173, 163, 82, 0.30) !important
}

.tab_light {
  background: #EFF8BE !important;
}

.word_light {
  color: #000 !important;
  font-size: 12px !important;
}

.word_light:hover { 
  background: yellow !important;
  color: #000 !important;
  cursor: pointer;
}

/* Descendant, not child, to match the binding's closest('.term_item'): an already-highlighted
   term nests its aligned word deeper, and inside a term the term owns the affordance. */
.align_item:not(.term_item *) {
  border-bottom: 1px dashed var(--crowdin-text-disabled);
}

.align_item:not(.term_item *):hover {
  border-bottom: 1px dashed var(--crowdin-body-color);
}

.term_item {
  cursor: pointer;
  border-bottom: 1px dashed var(--crowdin-text-muted);
}

.term_item:hover {
  border-bottom: 1px dashed var(--crowdin-body-color);
}

.spellcheck-issue {
  color: var(--crowdin-text-muted) !important;
  border-bottom: 2px solid var(--crowdin-warning);
  background: transparent;
}

.typos-mistake {
  border-color: var(--crowdin-danger);
}

.spelling-mistake,
.typography-mistake,
.redundancy-mistake,
.casing-mistake,
.grammar-mistake,
.punctuation-mistake,
.confused_words-mistake,
.style-mistake,
.gender_neutrality-mistake,
.semantics-mistake,
.colloquialisms-mistake,
.wikipedia-mistake,
.barbarism-mistake,
.misc-mistake {
  border-color: #F4C22A;
}

/* ::highlight(cwd-*) twins of the mark rules above — keep pairs in sync; see docs/textarea-highlight.md */

.hwt-highlights::highlight(cwd-tag),
.hwt-highlights::highlight(cwd-android-xliff) {
  background-color: var(--crowdin-tag-bg, #FAF6D8);
  color: var(--crowdin-tag-color, #787459);
}

.hwt-highlights::highlight(cwd-icu-placeholder) {
  color: #2a8696;
}

.hwt-highlights::highlight(cwd-icu-type) {
  color: #cc427a;
}

.hwt-highlights::highlight(cwd-icu-style) {
  color: #3f5ef5;
}

.hwt-highlights::highlight(cwd-icu-offset) {
  color: #a353d4;
}

.hwt-highlights::highlight(cwd-br) {
  background-color: #a9f7aa;
  color: #000077;
}

.hwt-highlights::highlight(cwd-placeholder) {
  background-color: var(--crowdin-placeholder-light-bg, #F0FFF0);
  color: var(--crowdin-placeholder-light-color, #007700);
}

.hwt-highlights::highlight(cwd-special) {
  background-color: var(--crowdin-special-light-bg, #F0F0FF);
  color: var(--crowdin-special-light-color, #770000);
}

.hwt-highlights::highlight(cwd-space) {
  background-color: rgba(173, 163, 82, 0.30);
}

.hwt-highlights::highlight(cwd-tab) {
  background-color: #EFF8BE;
}

/* The search hit inside a textarea. Its twin outside the mirror is ::highlight(cwd-search) in
   _search-toolbar.scss — same paint, different name, because the mirror is drawn through the
   engine's mapping and the DOM walker registers its own ranges under the other one. */
.hwt-highlights::highlight(cwd-search-hit) {
  color: var(--crowdin-search-hit-color, #263238);
  background-color: var(--crowdin-search-hit-bg, #ffe083);
}

.hwt-highlights::highlight(cwd-spellcheck),
.hwt-highlights::highlight(cwd-spellcheck-typos),
.hwt-highlights::highlight(cwd-spellcheck-warning) {
  color: var(--crowdin-text-muted, rgba(38, 50, 56, 0.54));
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: none;
}

/* fallback for engines that ignore skip-ink inside ::highlight() — the property is inherited */
.hwt-highlights {
  text-decoration-skip-ink: none;
}

.hwt-highlights::highlight(cwd-spellcheck) {
  text-decoration-color: #F4C22A;
}

.hwt-highlights::highlight(cwd-spellcheck-typos) {
  text-decoration-color: var(--crowdin-danger, #dc5242);
}

.hwt-highlights::highlight(cwd-spellcheck-warning) {
  text-decoration-color: var(--crowdin-warning, #c79d1c);
}

/* opacity is not applicable to highlights — mix toward transparent instead */
.context-phrase:not(.checked) .hwt-highlights::highlight(cwd-tag),
.context-phrase:not(.checked) .hwt-highlights::highlight(cwd-android-xliff) {
  background-color: color-mix(in srgb, var(--crowdin-tag-bg, #FAF6D8) 50%, transparent);
  color: color-mix(in srgb, var(--crowdin-tag-color, #787459) 50%, transparent);
}

.context-phrase:not(.checked) .hwt-highlights::highlight(cwd-placeholder) {
  background-color: color-mix(in srgb, var(--crowdin-placeholder-light-bg, #F0FFF0) 50%, transparent);
  color: color-mix(in srgb, var(--crowdin-placeholder-light-color, #007700) 50%, transparent);
}

.context-phrase:not(.checked) .hwt-highlights::highlight(cwd-special) {
  background-color: color-mix(in srgb, var(--crowdin-special-light-bg, #F0F0FF) 50%, transparent);
  color: color-mix(in srgb, var(--crowdin-special-light-color, #770000) 50%, transparent);
}

.context-phrase:not(.checked) .hwt-highlights::highlight(cwd-tab) {
  background-color: color-mix(in srgb, #EFF8BE 50%, transparent);
}

.context-phrase:not(.checked) .hwt-highlights::highlight(cwd-br) {
  background-color: color-mix(in srgb, #a9f7aa 50%, transparent);
  color: color-mix(in srgb, #000077 50%, transparent);
}

.context-phrase:not(.checked) .hwt-highlights::highlight(cwd-icu-placeholder) {
  color: color-mix(in srgb, #2a8696 50%, transparent);
}

.context-phrase:not(.checked) .hwt-highlights::highlight(cwd-icu-type) {
  color: color-mix(in srgb, #cc427a 50%, transparent);
}

.context-phrase:not(.checked) .hwt-highlights::highlight(cwd-icu-style) {
  color: color-mix(in srgb, #3f5ef5 50%, transparent);
}

.context-phrase:not(.checked) .hwt-highlights::highlight(cwd-icu-offset) {
  color: color-mix(in srgb, #a353d4 50%, transparent);
}