/*!****************************
*****     Beauty text     *****
******************************/

/* * */
/* * */
/* * */

@layer component {
  @scope (.beauty, .ck-content) {
    /* * */
    --_primary-color: var(--clr-primary-500);
    --_primary-color-darker: var(--clr-primary-700);
    --_primary-color-lighter: var(--clr-primary-300);
    /* * */
    --_font-size: calc(var(--fs) * 1.1);
    /* * */
    /* bigger font-size in dark mode
          [data-color-theme="dark"] & {
            --_font-size: calc(var(--fs) * 1.15);
          }
      */
    /* * */
    --_bold: var(--fw-bold);
    --_fs-bigger: calc(var(--fs) * 1.5);
    --_link-color: var(--clr-primary-500);
    /* * */

    /*color: inherit;*/
    /*color: var(--_text-color);*/
    font-family: var(--ff-sans);
    font-size: var(--_font-size);
    font-weight: var(--fw-normal);
    font-feature-settings: "pnum" on;
    line-height: calc(var(--lh) * 1.5);

    :where(.numbers):not(:where(.not-beauty)) {
      font-feature-settings: "onum" on;
    }

    :where(p):not(:where(.not-beauty)) {
      margin-block: 1em;
      text-wrap: pretty;
      font-size: inherit;
    }

      :where(p):not(:where(.not-beauty)):first-child {
        margin-top: 0;
      }

      /*
      &:last-child {
        margin-bottom: 0;
      }
      */

    :where(.lead):not(:where(.not-beauty)) {
      font-size: calc(var(--_font-size) * 1.5);
      line-height: calc(var(--lh) * 1.3);
    }

    :where(strong):not(:where(.not-beauty)) {
      font-weight: var(--_bold);
    }

    :where(em):not(:where(.not-beauty)) {
      font-style: italic;
      letter-spacing: 1px;
    }

    :where(u):not(:where(.not-beauty)) {
      -webkit-text-decoration: underline;
      text-decoration: underline;
      text-decoration-color: var(--_primary-color);
      text-decoration-style: solid;
      text-decoration-thickness: 0.2em;
      text-underline-offset: 0.25em;
    }

    :where(s):not(:where(.not-beauty)),
    :where(del):not(:where(.not-beauty)) {
      -webkit-text-decoration: line-through;
      text-decoration: line-through;
      text-decoration-color: var(--_primary-color);
      text-decoration-style: solid;
      text-decoration-thickness: 0.1em;
    }

    :where(blockquote):not(:where(.not-beauty)) {
      margin: var(--sp-4);
    }

      :where(blockquote):not(:where(.not-beauty)) p {
        padding: var(--sp-4);
        border-left: var(--sp-4) solid var(--_primary-color);
      }

    :where(a):not(:where(.not-beauty)) {
      transition: background-size 300ms;
      -webkit-text-decoration: none;
      text-decoration: none;
      color: var(--_link-color);
      background-image: linear-gradient(
        to right,
        var(--clr-primary-100),
        var(--clr-primary-700)
      );
      background-repeat: no-repeat;
      background-position-x: -50%;
      background-position-y: 100%;
      background-size: 0% 0.15em;
    }

      :where(a):not(:where(.not-beauty)):hover,:where(a):not(:where(.not-beauty)):focus-visible {
        transition: background-size 300ms;
        background-size: 100% 0.15em;
      } /* End of a */

    :where(hr):not(:where(.not-beauty)) {
      margin-block: 1em;
      margin-inline: 4em;
      border-color: var(--_primary-color);
    } /* End of hr */

    /*!
    *    Ordered list
    *  ================
    */
    :where(ol):not(:where(.not-beauty)) {
      margin: 1em 0 1em 1em;
      padding-left: 1em;
      list-style-position: outside;
      list-style-type: decimal;
    }

      :where(ol):not(:where(.not-beauty)):last-child {
        margin-bottom: 0;
      }

      :where(ol):not(:where(.not-beauty)) ol {
        margin-left: 0;
        list-style-type: lower-alpha;
      }

        :where(ol):not(:where(.not-beauty)) ol ol {
          list-style-type: lower-roman;
        }

      :where(ol):not(:where(.not-beauty)) li {
        margin-bottom: var(--sp-2);
        padding-left: var(--sp-2);
        font-size: var(--_font-size);
        text-wrap: pretty;
      }

        :where(ol):not(:where(.not-beauty)) li::marker {
          font-size: inherit;
          font-weight: var(--_bold);
          color: var(--_primary-color);
          transition: color var(--speed-300);
        }
          :where(ol):not(:where(.not-beauty)) li:hover::marker {
            transition: color var(--speed-300);
            --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) var(--_primary-color-lighter);
            color: var(--csstools-light-dark-toggle--6, var(--_primary-color-darker));
          }

@supports (color: light-dark(red, red)) {
:where(ol):not(:where(.not-beauty)) li:hover::marker {
            color: light-dark(
              var(--_primary-color-darker),
              var(--_primary-color-lighter)
            );
          }
} /* End of ol */

    /*!
    *    Unordered list
    *  ==================
    */
    :where(ul):not(:where(.not-beauty)) {
      margin: 1em 0 1em 1em;
      padding-left: 1em;
      list-style-position: outside;
    }

      :where(ul):not(:where(.not-beauty)):last-child {
        margin-bottom: 0;
      }

      :where(ul):not(:where(.not-beauty)) ul {
        margin-left: 0;
      }

      :where(ul):not(:where(.not-beauty)) li {
        margin-bottom: var(--sp-2);
        padding-left: var(--sp-2);
        font-size: var(--beauty-font-size);
        text-wrap: pretty;
      }

        :where(ul):not(:where(.not-beauty)) li::marker {
          /* content: '"\\1F81A"'; */ /* kulička - bullet */
          /* content: '\25fc';     */ /* čtvereček */
          /* content: '\261B';     */ /* ruka s ukazováčkem */
          /* content: '"—"',       */
          /* content: '\2740' ;    */ /* kytička */
          /* content: '"\\2794"'   */ /* Heavy Wide-Headed Rightwards Arrow */
          /* content: '\E000';     */
          /* content: "\203B";     */ /* rejže */
          font-weight: var(--_bold);
          content: "—";
          color: var(--_primary-color);
          transition: color var(--speed-300);
        }
          /* second level list */
          :where(ul):not(:where(.not-beauty)) li li::marker {
            content: "›";
          }
            /* third level list */
            :where(ul):not(:where(.not-beauty)) li li li::marker {
              content: "—";
            }
            /* forth level list */
              :where(ul):not(:where(.not-beauty)) li li li li::marker {
                content: "–";
              }
              /* fiveth level list */
                :where(ul):not(:where(.not-beauty)) li li li li li::marker {
                  content: "-";
                }
          :where(ul):not(:where(.not-beauty)) li:hover::marker {
            --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) var(--_primary-color-lighter);
            color: var(--csstools-light-dark-toggle--7, var(--_primary-color-darker));
            transition: color var(--speed-300);
          }

@supports (color: light-dark(red, red)) {
:where(ul):not(:where(.not-beauty)) li:hover::marker {
            color: light-dark(
              var(--_primary-color-darker),
              var(--_primary-color-lighter)
            );
          }
} /*! End of ul */

    /*!
    *         Six level deep decimal outline
    *     ======================================
    */

    ol.decimal-outline {
      counter-reset: L1;

      list-style-type: none;
      list-style-position: inside;
      counter-reset: L1;
      margin-left: 2rem;
      padding-left: 0;
    }

      ol.decimal-outline ol {
        list-style-position: inherit;
        list-style-type: inherit;
      }

      ol.decimal-outline li {
        padding-left: 0;
      }

        ol.decimal-outline li::marker {
          /*padding-right: 2em;*/
          font-feature-settings: "tnum";
          font-variant-numeric: tabular-nums;
          font-size: 1.2em;
          font-weight: var(--_bold);
          color: var(--_primary-color);
          /*transition: color var(--speed-300);*/
        }
      /*!
      *   LEVEL 1
      * ===========
      */

      ol.decimal-outline > :where(li) {
        counter-increment: L1;
        padding-left: 3ch;
      }

        ol.decimal-outline > :where(li)::marker {
          content: counter(L1) "\2009. ";
        }

        /*!
        *   LEVEL 2
        * ===========
        */
        ol.decimal-outline > :where(li) > :where(ol) {
          counter-reset: L2;
        }

          ol.decimal-outline > :where(li) > :where(ol) > :where(li) {
            counter-increment: L2;
            padding-left: -2ch;
          }

            ol.decimal-outline > :where(li) > :where(ol) > :where(li)::marker {
              content: counter(L1) "\2009.\2009 " counter(L2) " ";
            }

            /*!
            *   LEVEL 3
            * ===========
            */
            ol.decimal-outline > :where(li) > :where(ol) > :where(li) > :where(ol) {
              counter-reset: L3;
            }

              ol.decimal-outline > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li) {
                counter-increment: L3;
              }

                ol.decimal-outline > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li)::marker {
                  content: counter(L1) "\2009.\2009 " counter(L2) "\2009.\2009 "
                    counter(L3) " ";
                }

                /*!
                *   LEVEL 4
                * ===========
                */
                ol.decimal-outline > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li) > :where(ol) {
                  counter-reset: L4;
                }

                  ol.decimal-outline > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li) {
                    counter-increment: L4;
                  }

                    ol.decimal-outline > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li)::marker {
                      content: counter(L1) "\2009.\2009" counter(L2)
                        "\2009.\2009" counter(L3) "\2009.\2009" counter(L4) " ";
                    }

                    /*!
                    *   LEVEL 5
                    * ===========
                    */
                    ol.decimal-outline > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li) > :where(ol) {
                      counter-reset: L5;
                    }

                      ol.decimal-outline > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li) {
                        counter-increment: L5;
                      }

                        ol.decimal-outline > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li)::marker {
                          content: counter(L1) "\2009.\2009" counter(L2)
                            "\2009.\2009" counter(L3) "\2009.\2009" counter(L4)
                            "\2009.\2009" counter(L5) " ";
                        }

                        /*!
                        *   LEVEL 6
                        * ===========
                        */
                        ol.decimal-outline > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li) > :where(ol) {
                          counter-reset: L6;
                        }

                          ol.decimal-outline > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li) {
                            counter-increment: L6;
                          }

                            ol.decimal-outline > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li) > :where(ol) > :where(li)::marker {
                              content: counter(L1) "\2009.\2009" counter(L2)
                                "\2009.\2009" counter(L3) "\2009.\2009"
                                counter(L4) "\2009.\2009" counter(L5)
                                "\2009.\2009" counter(L6) " ";
                            }

    :where(time):not(:where(.not-beauty)) {
      font-family: var(--ff-mono);
    }

    :where(code):not(:where(.not-beauty)) {
      font-family: var(--ff-mono);
    }

    :where(abbr, .caps):not(:where(.not-beauty)) {
      font-feature-settings: "smcp", "c2sc";
      font-variant-caps: all-small-caps;
    }

    :where(sup):not(:where(.not-beauty)) {
      /* font-feature-settings: "sups" on; */
      font-feature-settings: "sups";
      font-variant-position: super;
      /*top: -0.3em;*/
    }

    /*:where(.ordinal):not(:where(.not-beauty)) {
      font-feature-settings: "ordn" on;
    }*/

    /*:where(.numerator):not(:where(.not-beauty)) {
      top: 0;
      left: -0.1em;
      font-size: 0.8em;
      font-feature-settings: "numr" on;
    }*/

    :where(sub):not(:where(.not-beauty)) {
      /* font-feature-settings: "subs" on; */
      font-feature-settings: "subs";
      font-variant-position: sub;
    }

    /*:where(.denominator):not(:where(.not-beauty)) {
      right: -0.1em;
      bottom: 0;
      font-size: 0.8em;
      font-feature-settings: "dnom" on;
    }*/

    :where(pre):not(:where(.not-beauty)) {
      overflow-x: auto;
      display: block;
      padding: var(--sp-4);
      white-space: pre-wrap;
      --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) var(--clr-gray-900);
      background-color: var(--csstools-light-dark-toggle--0, var(--clr-gray-100));
      font-family: var(--ff-mono);
    }

@supports (color: light-dark(red, red)) {
:where(pre):not(:where(.not-beauty)) {
      background-color: light-dark(var(--clr-gray-100), var(--clr-gray-900));
    }
}

    :where(mark):not(:where(.not-beauty)) {
      padding-inline: var(--sp-1);
      border-radius: 5px;
      /*background-color: color-mix(in sRGB, var(--clr-primary-500), white 70%);*/
    }

    /* ***************************************************
    *
    * Add :not(.tablesaw-advance-dots) just to
    * work with  drupal/responsive_tables_filter
    *
    *************************************************** */

    /* **********************************************
    *   drupal/responsive_tables_filter is better
    *   solution for responsive tables...
    *
    *   & .table-wrapper {
    *     overflow-x: scroll;
    *     width: 100%;
    *   }
    *
    * ******************************************** */

    :where(table):not(:where(.not-beauty)) {
      position: relative;
      width: 100%;
      margin: 1em 5px;
      border-collapse: collapse;
      /* <offset-x> <offset-y> <blur-radius> <spread-radius> <color> */
      --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) var(--clr-dark-200);
      box-shadow: 0 0 5px 1px
        var(--csstools-light-dark-toggle--1, var(--clr-dark-100));
      font-feature-settings:
        "tnum" on,
        "zero" on;
      /* font-variant-numeric: tabular-nums slashed-zero; */
    }

@supports (color: light-dark(red, red)) {
:where(table):not(:where(.not-beauty)) {
      box-shadow: 0 0 5px 1px
        light-dark(var(--clr-dark-100), var(--clr-dark-200));
    }
}

    :where(caption):not(:where(.not-beauty)) {
      /*position: absolute;
      inset-inline: 0;
      top: 100%;*/
      caption-side: bottom;

      padding: var(--sp-2) var(--sp-4);
      text-align: start;
      font-weight: var(--beauty-bold-weight);
      font-style: italic;
      /*background-color: rebeccapurple;*/
    }

    :where(thead):not(:where(.not-beauty)) {
      font-weight: var(--_bold);
      /*position: sticky;*/
      /*z-index: 30;*/
      /*top: 80px;*/
    }

    :where(th):not(:where(.not-beauty)) {
      --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) var(--clr-dark-400);
      background-color: var(--csstools-light-dark-toggle--2, var(--clr-light-700));
      /*text-align: start;*/
    }

@supports (color: light-dark(red, red)) {
:where(th):not(:where(.not-beauty)) {
      background-color: light-dark(var(--clr-light-700), var(--clr-dark-400));
    }
}

    :where(th, td):not(:where(.not-beauty)) {
      padding: var(--sp-2) var(--sp-4);
      --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) var(--clr-dark-300);
      border: solid 2px var(--csstools-light-dark-toggle--3, var(--clr-light-100));
    }

@supports (color: light-dark(red, red)) {
:where(th, td):not(:where(.not-beauty)) {
      border: solid 2px light-dark(var(--clr-light-100), var(--clr-dark-300));
    }
}
      :where(tr):not(:where(.not-beauty)):nth-child(1n) {
        --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) var(--clr-dark-200);
        background-color: var(--csstools-light-dark-toggle--4, var(--clr-light-300));
      }

@supports (color: light-dark(red, red)) {
:where(tr):not(:where(.not-beauty)):nth-child(1n) {
        background-color: light-dark(var(--clr-light-300), var(--clr-dark-200));
      }
}

      :where(tr):not(:where(.not-beauty)):nth-child(2n) {
        --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) var(--clr-dark-400);
        background-color: var(--csstools-light-dark-toggle--5, var(--clr-light-700));
      }

@supports (color: light-dark(red, red)) {
:where(tr):not(:where(.not-beauty)):nth-child(2n) {
        background-color: light-dark(var(--clr-light-700), var(--clr-dark-400));
      }
}
  } /* End of @scope (.beauty) */
} /* End of @layer component */