/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.formatted-document {
  color: #4A4A4A;

  &>div {
    white-space: normal;
  }

  h2 {
    font-size: 2.275rem;
    font-weight: bold;
    color: #333333;
  }

  h3 {
    font-size: 1.95rem;
    font-weight: bold;
    color: #333333;
  }

  syllable,
  grapheme {
    position: relative;
    display: inline-block;

    &:before,
    &:after {
      content: "";
      display: none;
      position: absolute;
      z-index: -10;
    }

    &.hide-augmentation:after {
      display: none !important;
    }
  }

  .with-picto grapheme::before {
    display: block;
    top: 0;
    left: calc(100% - 50% - 6px);
    min-width: 12px;
    height: 12px;
    background-size: 12px;
    background-position-x: center;
    background-repeat: no-repeat;
  }

  .with-picto no-help grapheme:before {
      display: none;
  }

  .with-picto dictation grapheme::before {
    top: -13px;
  }

  .medium-size {
    font-size: 1.625rem;

    word {
      line-height: 60px;
    }

    grapheme::before {
      top: 5px;
    }
  }

  .large-size {
    font-size: 2.125rem;

    word {
      line-height: 70px
    }

    grapheme::before {
      min-width: 17px;
      height: 17px;
      background-size: 17px;
      left: calc(100% - 50% - 8px);
    }

    &.with-picto dictation grapheme::before {
      top: -19px;
    }
  }

  .extra-large-size {
    font-size: 2.5rem;

    word {
      line-height: 80px
    }

    grapheme::before {
      min-width: 20px;
      height: 20px;
      background-size: 20px;
      left: calc(100% - 50% - 10px);
    }

    &.with-picto dictation grapheme::before {
      top: -22px;
    }
  }

  .medium-word-spacing {
    word-spacing: inherit;
  }

  .large-word-spacing {
    word-spacing: 20px;

    /* ONLY FOR SAFARI : Arbitrary width to force the editor's content to wrap */
    _::-webkit-full-page-media, _:future, :root &>div {
      width: 598px;
      word-wrap: normal;
    }
  }

  .extra-large-word-spacing {
    word-spacing: 40px;

    /* ONLY FOR SAFARI : Arbitrary width to force the editor's content to wrap */
    _::-webkit-full-page-media, _:future, :root &>div {
      width: 550px;
      word-wrap: normal;
    }
  }

  .medium-letter-spacing {
    letter-spacing: normal;
    &.with-triple.with-complex-underline word {
      syllable[data-schema="CCV"],
      syllable[data-schema="CCVS"],
      syllable[data-schema="CCV#"] {
        grapheme[data-complex="even"]:after,
        grapheme[data-complex="odd"]:after {
          width: calc(100% - 5px);
        }
      }
    }
  }

  .large-letter-spacing {
    grapheme {
      letter-spacing: 10px;
    }

    &.arc-syllable-type word syllable:after {
      width: calc(120% - 10px);
    }
    &.with-triple {
      syllable[data-schema="CCV"],
      syllable[data-schema="CCVS"],
      syllable[data-schema="CCV#"] {
        grapheme {
          letter-spacing: 10px;
        }

        grapheme::after {
          padding-left: calc(100% - 10px);
        }
      }
    }
    &.with-complex-underline word grapheme[data-complex="even"]:after,
    &.with-complex-underline word grapheme[data-complex="odd"]:after {
      width: calc(100% - 10px);
    }

    grapheme::before {
      left: calc(100% - 50% - 8px - 5px);
    }

    dictation grapheme {
      /* We draw N underscores = one 1ch + letter-spacing segment per character */
      background:
        repeating-linear-gradient(
          to right,
          var(--dictation-color) 0,
          var(--dictation-color) 1ch,
          transparent 1ch,
          transparent calc(1ch + 10px)
        )
        bottom / 100% 2px no-repeat;
    }

    &.with-complex-underline dictation word grapheme[data-complex="odd"]:after,
    &.with-complex-underline dictation word grapheme[data-complex="even"]:after {
      width: calc(100% - 9px);
    }
  }

  .extra-large-letter-spacing {
    grapheme {
      letter-spacing: 20px;
    }

    &.arc-syllable-type word syllable:after {
      width: calc(120% - 20px);
    }
    &.with-triple {
      syllable[data-schema="CCV"],
      syllable[data-schema="CCVS"],
      syllable[data-schema="CCV#"] {
        grapheme {
          letter-spacing: 20px;
        }

        grapheme::after {
          padding-left: calc(100% - 20px);
        }
      }
    }
    &.with-complex-underline word grapheme[data-complex="even"]:after,
    &.with-complex-underline word grapheme[data-complex="odd"]:after {
      width: calc(100% - 20px);
    }

    grapheme::before {
      left: calc(100% - 50% - 8px - 10px);
    }

    &.with-arc-syllable dictation word syllable:after {
      width: calc(120% - 10px);
    }

    dictation grapheme {
      /* We draw N underscores = one 1ch + letter-spacing segment per character */
      background:
        repeating-linear-gradient(
          to right,
          var(--dictation-color) 0,
          var(--dictation-color) calc(1ch + 10px),
          transparent calc(1ch + 10px),
          transparent calc(1ch + 20px)
        )
        bottom / 100% 2px no-repeat;
    }

    &.with-complex-underline dictation word grapheme[data-complex="odd"]:after,
    &.with-complex-underline dictation word grapheme[data-complex="even"]:after {
      width: calc(100% - 9px);
    }
  }

  .medium-line-spacing {
    line-height: 60px;
  }

  .large-line-spacing {
    line-height: 100px;
  }

  .extra-large-line-spacing {
    line-height: 140px;
  }

  .with-complex-underline {
    grapheme[data-complex="odd"]:after {
      display: block;
      bottom: 16px;
      width: 100%;
      border-bottom: 2px solid #4A4A4A;
    }

    grapheme[data-complex="even"]:after {
      display: block;
      bottom: 16px;
      width: 100%;
      border-bottom: 2px dotted #4A4A4A;
    }

    no-help grapheme[data-complex="odd"]:after,
    no-help grapheme[data-complex="even"]:after {
      border-bottom: none;
    }

    dictation grapheme[data-complex="odd"]:after,
    dictation grapheme[data-complex="even"]:after {
      bottom: -7px;
    }
  }

  .with-triple {
    syllable[data-schema="CCV"],
    syllable[data-schema="CCVS"],
    syllable[data-schema="CCV#"] {
      counter-reset: phoneme;

      grapheme {
        letter-spacing: 5px;
      }

      grapheme::after {
        display: block;
        bottom: 16px;
        width: 100%;
        font-size: 0.7rem;
        counter-increment: phoneme;
        content: counter(phoneme);
        line-height: 0px;
        height: 2px;
        padding-left: calc(100% - 5px);
      }
      grapheme[data-phoneme="#"]::after {
        display: none;
      }
    }

    no-help syllable[data-schema="CCV"],
    no-help syllable[data-schema="CCVS"],
    no-help syllable[data-schema="CCV#"] {
      grapheme::after {
        display: none;
      }
      grapheme {
        letter-spacing: initial;
      }
    }

    syllable[data-schema="CCVS"] grapheme[data-phoneme="#"]::after {
      display: none;
    }
  }
  .with-silent-letters {
    word grapheme[data-phoneme="#"],
    word grapheme[data-phoneme="#_h"] {
      opacity: 0.4;
    }

    no-help word grapheme[data-phoneme="#"] {
      opacity: 1;
    }
  }

  .colored-syllable-type {
    word:not([data-syllable-count="1"]) syllable {
      color: blue;

      &:nth-child(even) {
        color: red;
      }
    }

    no-help word:not([data-syllable-count="1"]) syllable,
    no-help word:not([data-syllable-count="1"]) syllable:nth-child(even) {
      color: #4A4A4A;
    }
  }

  .arc-syllable-type {
    word:not([data-syllable-count="1"]) syllable:after {
      display: block;
      margin-left: -10%;
      bottom: 6px;
      left: 0;
      width: 120%;
      height: 25px;
      border: 1px solid;
      border-color: transparent transparent #4A4A4A transparent;
      border-radius: 50%;
    }

    no-help word:not([data-syllable-count="1"]) syllable:after {
      display: none;
    }
  }

  .with-coloring {
    &.phonemic-coloring-type {
      &.with-phonemic-coloring-ou {
        grapheme[data-phoneme="u"][data-complex] {
          color: #FF3130;
        }

        dictation grapheme[data-phoneme="u"][data-complex] {
          --dictation-color: #FF3130;
        }
      }
      &.with-phonemic-coloring-eu {
        grapheme[data-phoneme="q"][data-complex],
        grapheme[data-phoneme="x^"][data-complex] {
          color: blue;
        }

        dictation grapheme[data-phoneme="q"][data-complex],
        dictation grapheme[data-phoneme="x^"][data-complex] {
          --dictation-color: blue;
        }
      }
      &.with-phonemic-coloring-an {
        grapheme[data-phoneme="a~"][data-complex] {
          color: #EF7C1B;
        }

        dictation grapheme[data-phoneme="a~"][data-complex] {
          --dictation-color: #EF7C1B;
        }
      }
      &.with-phonemic-coloring-au {
        grapheme[data-phoneme="o"][data-complex],
        grapheme[data-phoneme="o_comp"][data-complex] {
          color: #F3C761;
        }

        dictation grapheme[data-phoneme="o"][data-complex],
        dictation grapheme[data-phoneme="o_comp"][data-complex] {
          --dictation-color: #F3C761;
        }
      }
      &.with-phonemic-coloring-oi {
        grapheme[data-phoneme="wa"][data-complex] {
          font-weight: bold;
        }
      }
      &.with-phonemic-coloring-on {
        grapheme[data-phoneme="o~"][data-complex] {
          color: #975A31;
        }

        dictation grapheme[data-phoneme="o~"][data-complex] {
          --dictation-color: #975A31;
        }
      }
      &.with-phonemic-coloring-in {
        grapheme[data-phoneme="e~"][data-complex] {
          color: green;
        }

        dictation grapheme[data-phoneme="e~"][data-complex] {
          --dictation-color: green;
        }
      }
      &.with-phonemic-coloring-ai {
        grapheme[data-phoneme="e^_comp"][data-complex],
        grapheme[data-phoneme="e^"] {
          color: #984694;
        }

        dictation grapheme[data-phoneme="e^_comp"][data-complex],
        dictation grapheme[data-phoneme="e^"] {
          --dictation-color: #984694;
        }
      }
      &.with-phonemic-coloring-er {
        grapheme[data-phoneme="e_comp"][data-complex] {
          color: #E62778;
        }

        dictation grapheme[data-phoneme="e_comp"][data-complex] {
          --dictation-color: #E62778;
        }
      }

      no-help grapheme[data-phoneme="u"][data-complex],
      no-help grapheme[data-phoneme="q"][data-complex],
      no-help grapheme[data-phoneme="x^"][data-complex],
      no-help grapheme[data-phoneme="a~"][data-complex],
      no-help grapheme[data-phoneme="o"][data-complex],
      no-help grapheme[data-phoneme="o_comp"][data-complex],
      no-help grapheme[data-phoneme="o~"][data-complex],
      no-help grapheme[data-phoneme="e~"][data-complex],
      no-help grapheme[data-phoneme="e^_comp"][data-complex],
      no-help grapheme[data-phoneme="e_comp"][data-complex] {
        color: black;
      }
      no-help grapheme[data-phoneme="wa"][data-complex] {
        font-weight: normal;
      }

      dictation grapheme {
        color: transparent !important;
      }

      dictation grapheme[data-complex="odd"]:after,
      dictation grapheme[data-complex="even"]:after {
        bottom: -6px;
      }
    }

    &.letter-coloring-type {
      &.with-letter-coloring-consonant {
        grapheme[data-consonant] {
          color: blue;
        }

        dictation grapheme[data-consonant] {
          --dictation-color: blue;
        }
      }
      &.with-letter-coloring-vowel {
        grapheme[data-vowel] {
          color: red;
        }

        dictation grapheme[data-vowel] {
          --dictation-color: red;
        }
      }
      &.with-letter-coloring-complex {
        grapheme[data-complex] {
          color: green;
        }

        dictation grapheme[data-complex] {
          --dictation-color: green;
        }
      }

      no-help grapheme[data-consonant],
      no-help grapheme[data-vowel],
      no-help grapheme[data-complex] {
        color: initial !important;
      }

    }
  }

  dictation grapheme {
    --dictation-color: #222;
    font-family: ui-monospace, monospace;
    color: transparent;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    line-height: 1;
    text-decoration: none;
    caret-color: black;
    /* We draw N underscores = one 1ch segment per character */
    background:
      repeating-linear-gradient(
        to right,
        var(--dictation-color) 0,
        var(--dictation-color) .85ch,
        transparent .85ch,
        transparent 1ch
      )
      bottom / 100% 2px no-repeat;
  }
}