@use '@jambonz/ui-kit/src/styles/vars' as ui-vars;
@use '@jambonz/ui-kit/src/styles/mixins' as ui-mixins;

.text-layout {
  max-width: ui-vars.$width-tablet-2;
  width: 100%;
  margin: 0 auto;

  @media (max-width: ui-vars.$width-tablet-1) {
    max-width: 100%;
  }

  &__wrap {
    // CSS Owl Selector
    // https://dev.to/kevtiq/an-ode-to-the-css-owl-selector-359c
    > * + * {
      margin-top: 24px;
    }

    a {
      border-bottom: 1px solid ui-vars.$jambonz;
    }

    sup {
      color: ui-vars.$jambonz;
    }

    p {
      @include ui-mixins.ms();
    }

    blockquote {
      border-left: 3px solid ui-vars.$dark;
      background-color: ui-vars.$grey-light;
      border-radius: 0.3em;

      p {
        font-family: ui-vars.$font-regular-italic;
        padding: 16px;
      }
    }

    ol {
      padding-left: 16px;

      li {
        list-style-type: decimal;
        margin: 16px 0;

        p,
        &::marker {
          @include ui-mixins.p();
          font-size: 14px;
        }
      }
    }

    ul {
      padding-left: 32px;

      li {
        list-style-type: disc;
        @include ui-mixins.ms();
      }
    }

    table {
      @include ui-mixins.ms();
      width: 100%;

      td, th {
        padding: 8px 12px;
        border: 1px solid ui-vars.$grey;
      }

      th {
        @include ui-mixins.font-bold();
      }

      tbody {
        tr:nth-child(odd) {
          background-color: ui-vars.$grey-light;
        }
      }
    }

    pre[class*="language-"] {
      margin: 0;
    }

    code[class*="language-"],
    pre[class*="language-"] {
      font-size: 0.82em;

      @media (max-width: ui-vars.$width-tablet-1) {
        font-size: 13px;
      }
    }

    code:not([class*="language-"]) {
      font-family: ui-vars.$font-mono;
      font-size: 13px;
      color: ui-vars.$jambonz;
    }
  }
}
