@import "./vars.pcss";

.typo {
  font-size: var(--typoFontSize);
  line-height: var(--typoLineHeight);

  ::selection {
    background-color: var(--typoSelectionBg);
    color: var(--typoSelectionColor);
  }

  h1, .h1,
  h2, .h2,
  h3, .h3,
  h4, .h4,
  h5, .h5,
  h6, .h6 {
    display: var(--typoHeadingDisplay);
    text-transform: var(--typoHeadingTextTransform);
    line-height: var(--typoHeadingLh);
    letter-spacing: var(--typoHeadingLs);
    font-weight: var(--typoHeadingFontWeight);
    font-family: var(--typoHeadingFontFamily);
    font-style: var(--typoHeadingFontStyle);
    border-bottom: var(--typoHeadingBorderBottom);
    color: var(--typoHeadingColor);
    hyphens: var(--typoHeadingHyphens);
    overflow-wrap: var(--typoHeadingOverflowWrap);

    @mixin nfc {
      padding-top: var(--typoHeadingPt);
    }
    @mixin scrollMt var(--typoHeadingScrollMt);
    @mixin mb var(--typoHeadingMb);
    @mixin fluidText var(--typoHeadingFsMax), var(--typoHeadingFsMin);

    @media(--tabletAbove) {
      --typoHeadingLh: var(--typoHeadingLhDesktop);
      --typoHeadingMb: var(--typoHeadingMbDesktop);
      --typoHeadingPt: var(--typoHeadingPtDesktop);
      --typoHeadingFsMax: var(--typoHeadingFsMaxDesktop);
      --typoHeadingFsMin: var(--typoHeadingFsMinDesktop);
      --typoHeadingLs: var(--typoHeadingLsDesktop);
    }

    @media(--tablet) {
      --typoHeadingLh: var(--typoHeadingLhTablet);
      --typoHeadingMb: var(--typoHeadingMbTablet);
      --typoHeadingPt: var(--typoHeadingPtTablet);
      --typoHeadingFsMax: var(--typoHeadingFsMaxTablet);
      --typoHeadingFsMin: var(--typoHeadingFsMinTablet);
      --typoHeadingLs: var(--typoHeadingLsTablet);
    }

    @media(--mobile) {
      --typoHeadingLh: var(--typoHeadingLhMobile);
      --typoHeadingMb: var(--typoHeadingMbMobile);
      --typoHeadingPt: var(--typoHeadingPtMobile);
      --typoHeadingFsMax: var(--typoHeadingFsMaxMobile);
      --typoHeadingFsMin: var(--typoHeadingFsMinMobile);
      --typoHeadingLs: var(--typoHeadingLsMobile);
    }

    & + * {
      --typoHeadingPt: 0;
    }
  }

  h1, .h1 {
    --typoHeadingFontWeight: 600;

    /* desktop */
    --typoHeadingLsDesktop: -3.04px;
    --typoHeadingLhDesktop: 94.737%;
    --typoHeadingFsMaxDesktop: 76;
    --typoHeadingFsMinDesktop: 68;
    --typoHeadingMbDesktop: 8rem;

    /* tablet */
    --typoHeadingLsTablet: -2.24px;
    --typoHeadingLhTablet: 94.737%;
    --typoHeadingFsMaxTablet: 68;
    --typoHeadingFsMinTablet: 60;
    --typoHeadingMbTablet: 7rem;
    --typoHeadingPtTablet: 0;

    /* mobile */
    --typoHeadingLsMobile: -1.44px;
    --typoHeadingLhMobile: 94.737%;
    --typoHeadingFsMaxMobile: 60;
    --typoHeadingFsMinMobile: 52;
    --typoHeadingMbMobile: 6rem;
    --typoHeadingPtMobile: 0;
  }

  h2, .h2 {
    --typoHeadingFontWeight: 600;

    /* desktop */
    --typoHeadingLhDesktop: 100%;
    --typoHeadingLsDesktop: -2.24px;
    --typoHeadingFsMaxDesktop: 56;
    --typoHeadingFsMinDesktop: 48;
    --typoHeadingMbDesktop: 6rem;
    --typoHeadingPtDesktop: 2rem;

    /* tablet */
    --typoHeadingLsTablet: -1.44px;
    --typoHeadingPtTablet: 1.75rem;
    --typoHeadingFsMaxTablet: 48;
    --typoHeadingFsMinTablet: 40;
    --typoHeadingMbTablet: 5rem;

    /* mobile */
    --typoHeadingLsMobile: -0.64px;
    --typoHeadingPtMobile: 1.5rem;
    --typoHeadingFsMaxMobile: 40;
    --typoHeadingFsMinMobile: 32;
    --typoHeadingMbMobile: 4rem;
  }

  h3, .h3 {
    --typoHeadingFontWeight: 600;

    /* desktop */
    --typoHeadingLsDesktop: -1.2px;
    --typoHeadingLhDesktop: 120%;
    --typoHeadingFsMaxDesktop: 40;
    --typoHeadingFsMinDesktop: 32;
    --typoHeadingMbDesktop: 4rem;
    --typoHeadingPtDesktop: 1.75rem;

    /* tablet */
    --typoHeadingLsTablet: -0.8px;
    --typoHeadingPtTablet: 1.5rem;
    --typoHeadingFsMaxTablet: 32;
    --typoHeadingFsMinTablet: 28;
    --typoHeadingMbTablet: 3.5rem;

    /* mobile */
    --typoHeadingLsMobile: -0.4px;
    --typoHeadingPtMobile: 1.25rem;
    --typoHeadingFsMaxMobile: 28;
    --typoHeadingFsMinMobile: 24;
    --typoHeadingMbMobile: 3rem;
  }

  h4, .h4 {
    --typoHeadingFontWeight: 600;

    /* desktop */
    --typoHeadingLsDesktop: -0.64px;
    --typoHeadingLhDesktop: 125%;
    --typoHeadingFsMaxDesktop: 32;
    --typoHeadingFsMinDesktop: 24;
    --typoHeadingPtDesktop: 1.5rem;
    --typoHeadingMbDesktop: 3rem;

    /* tablet */
    --typoHeadingLsTablet: -0.24px;
    --typoHeadingPtTablet: 1.25rem;
    --typoHeadingFsMaxTablet: 24;
    --typoHeadingFsMinTablet: 22;
    --typoHeadingMbTablet: 2.75rem;

    /* mobile */
    --typoHeadingLsMobile: 0;
    --typoHeadingPtMobile: 1rem;
    --typoHeadingFsMaxMobile: 22;
    --typoHeadingFsMinMobile: 20;
    --typoHeadingMbMobile: 2.5rem;
  }

  h5, .h5 {
    --typoHeadingFontWeight: 600;

    /* desktop */
    --typoHeadingLsDesktop: -0.24px;
    --typoHeadingLhDesktop: 133.333%;
    --typoHeadingFsMaxDesktop: 24;
    --typoHeadingFsMinDesktop: 22;
    --typoHeadingPtDesktop: 1.25rem;
    --typoHeadingMbDesktop: 2rem;

    /* tablet */
    --typoHeadingLsTablet: 0;
    --typoHeadingPtTablet: 1rem;
    --typoHeadingFsMaxTablet: 22;
    --typoHeadingFsMinTablet: 20;
    --typoHeadingMbTablet: 1.75rem;

    /* mobile */
    --typoHeadingLsMobile: 0;
    --typoHeadingPtMobile: .75rem;
    --typoHeadingFsMaxMobile: 20;
    --typoHeadingFsMinMobile: 18;
    --typoHeadingMbMobile: 1.5rem;
  }

  h6, .h6 {
    --typoHeadingFontWeight: 600;

    /* desktop */
    --typoHeadingLsDesktop: -0.2px;
    --typoHeadingLhDesktop: 140%;
    --typoHeadingFsMaxDesktop: 20;
    --typoHeadingFsMinDesktop: 18;
    --typoHeadingMbDesktop: 1rem;
    --typoHeadingPtDesktop: 1rem;

    /* tablet */
    --typoHeadingLhTablet: 140%;
    --typoHeadingPtTablet: .75rem;
    --typoHeadingFsMaxTablet: 18;
    --typoHeadingFsMinTablet: 16;
    --typoHeadingMbTablet: .75rem;

    /* mobile */
    --typoHeadingLhMobile: 140%;
    --typoHeadingPtMobile: .5rem;
    --typoHeadingFsMaxMobile: 16;
    --typoHeadingFsMinMobile: 16;
    --typoHeadingMbMobile: .5rem;
  }

  p {
    @mixin mb var(--typoParagraphMb);
  }

  a:not([class]) {
    color: var(--typoLinkColor);
    position: var(--typoLinkPosition);
    display: var(--typoLinkDisplay);
    text-decoration: var(--typoLinkTextDecoration);
    border-bottom: var(--typoLinkBorderBottom);
    @mixin scrollMt var(--typoLinkScrollMt);
    @mixin transition var(--typoLinkTransition);

    @mixin hover {
      color: var(--typoLinkHoverColor);
    }

    &:active {
      color: var(--typoLinkActiveColor);
    }

    &[href^="tel:"],
    &[href^="mailto:"],
    &[href^="fax:"] {
      white-space: nowrap;
      hyphens: auto;
    }

    * {
      pointer-events: none;
    }
  }

  b,
  strong {
    font-weight: var(--typoStrongFontWeight);
    font-family: var(--typoStrongFontFamily);
  }

  i,
  em {
    font-style: var(--typoItalicFontStyle);
    font-family: var(--typoItalicFontFamily);
  }

  mark {
    background: var(--typoMarkBg);
    color: var(--typoMarkColor);
    padding: var(--typoMarkPadding);
    border-radius: var(--typoMarkBorderRadius);
    border: var(--typoMarkBorder);
  }

  mark,
  code {
    display: inline-flex;
  }

  pre {
    max-height: var(--typoPreMaxHeight);
    background: var(--typoPreBg);
    display: block;
    white-space: pre-wrap;
    padding: var(--typoPrePadding);
    overflow-y: auto;
    border: var(--typoPreBorder);
    border-radius: var(--typoPreBorderRadius);
    -webkit-overflow-scrolling: touch;
    @mixin customScrollbar;
    @mixin mb var(--typoPreMb);
  }

  pre,
  code {
    color: var(--typoCodeColor);
    font-family: var(--typoCodeFontFamily);
    font-size: var(--typoCodeFontSize);
    line-height: var(--typoCodeLineHeight);
  }

  code {
    background: var(--typoCodeBg);
    border: var(--typoCodeBorder);
    border-radius: var(--typoCodeBorderRadius);
    padding: var(--typoCodePadding);
  }

  small {
    font-size: var(--typoSmallFontSize);
    line-height: var(--typoSmallLineHeight);
    color: var(--typoSmallColor);
    display: var(--typoSmallDisplay);
    letter-spacing: var(--typoSmallLetterSpacing);
    @mixin mb var(--typoSmallMb);
  }

  sub,
  sup {
    display: var(--typoIndexedTextDisplay);
    font-size: var(--typoIndexedTextFontSize);
    color: var(--typoIndexedTextColor);
    line-height: var(--typoIndexedTextLineHeight);
    letter-spacing: var(--typoIndexedTextLetterSpacing);
  }

  iframe,
  video,
  object {
    @mixin imgBlock;
  }

  hr {
    --typoHrMargin: var(--typoHrMarginDesktop);
    display: block;
    width: var(--typoHrWidth);
    height: var(--typoHrHeight);
    margin: var(--typoHrMargin);
    background: var(--typoHrBackground);
    border-radius: var(--typoHrBorderRadius);

    @media(--tablet) {
      --typoHrMargin: var(--typoHrMarginTablet);
    }

    @media(--mobile) {
      --typoHrMargin: var(--typoHrMarginMobile);
    }
  }

  img:not([class]) {
    user-select: none;
    height: auto;
    border-radius: var(--typoImgBorderRadius);
    @mixin imgBlock;
    @mixin mb var(--typoImgMargin);

    &[height] {
      @media(--mobile) {
        height: auto;
      }
    }

    /* stylelint-disable scale-unlimited/declaration-strict-value */
    &[style*="float:right"],
    &[style*="float: right"],
    &[align="right"] {
      margin-left: var(--typoImgMargin);
      margin-top: 0;
      max-width: var(--typoImgFloatMaxWidth);
      float: right;

      @mixin noc {
        margin-bottom: calc(var(--typoImgMargin) / 2);
      }

      /* stylelint-disable declaration-no-important */
      @media(--tablet) {
        --typoImgFloatMaxWidth: 100%;
        float: none !important;
        margin-left: 0;
      }
      /* stylelint-enable declaration-no-important */
    }

    &[style*="float:left"],
    &[style*="float: left"],
    &[align="left"] {
      margin-right: var(--typoImgMargin);
      margin-top: 0;
      max-width: var(--typoImgFloatMaxWidth);
      float: left;

      @mixin noc {
        margin-bottom: calc(var(--typoImgMargin) / 2);
      }

      /* stylelint-disable declaration-no-important */
      @media(--tablet) {
        --typoImgFloatMaxWidth: 100%;
        float: none !important;
        margin-right: 0;
      }
      /* stylelint-enable declaration-no-important */
    }
  }

  q {
    quotes: var(--typoQuoteQuotes);
    display: var(--typoQuoteDisplay);
    padding: var(--typoQuotePadding);
    border: var(--typoQuoteBorder);
    border-radius: var(--typoQuoteBorderRadius);
    line-height: var(--typoQuoteLineHeight);
    border-width: var(--typoQuoteBorderWidth);
    background: var(--typoQuoteBg);
    color: var(--typoQuoteColor);
    letter-spacing: var(--typoQuoteLetterSpacing);
    @mixin mb var(--typoQuoteMb);
    @mixin fluidText var(--typoQuoteFsMax), var(--typoQuoteFsMin);
  }

  blockquote {
    display: var(--typoQuoteBlockDisplay);
    padding: var(--typoQuoteBlockPadding);
    border: var(--typoQuoteBlockBorder);
    border-radius: var(--typoQuoteBlockBorderRadius);
    line-height: var(--typoQuoteBlockLineHeight);
    border-width: var(--typoQuoteBlockBorderWidth);
    background: var(--typoQuoteBlockBg);
    background-size: var(--typoQuoteBlockBgSize);
    color: var(--typoQuoteBlockColor);
    letter-spacing: var(--typoQuoteBlockLetterSpacing);
    @mixin mb var(--typoQuoteBlockMb);
    @mixin fluidText var(--typoQuoteBlockFsMax), var(--typoQuoteBlockFsMin);

    @media(--tablet) {
      --typoQuoteBlockBgSize: 4rem;
      --typoQuoteBlockPadding: 0 0 0 6rem;
    }

    @media(--mobile) {
      --typoQuoteBlockBgSize: 3rem;
      --typoQuoteBlockPadding: 0 0 0 5rem;
    }

    cite {
      color: var(--typoQuoteBlockCiteColor);
      font-style: var(--typoQuoteBlockCiteFontStyle);
      font-weight: var(--typoQuoteBlockCiteFontWeight);
      line-height: var(--typoQuoteBlockCiteLineHeight);
      font-size: var(--typoQuoteBlockCiteFontSize);
      padding: var(--typoQuoteBlockCitePadding);
      border: var(--typoQuoteBlockCiteBorder);
      border-width: var(--typoQuoteBlockCiteBorderWidth);
    }
  }


  ul:not([class]),
  ol:not([class]) {
    font-size: var(--typoListFontSize);
    line-height: var(--typoListLineHeight);
    list-style-type: none;
    overflow: var(--typoListOverflow);
    @mixin mb var(--typoListMb);

    li {
      position: var(--typoListLiPosition);
      @mixin mb var(--typoListLiMb);
    }

    /* nested */
    ol,
    ul {
      margin-top: var(--typoListNestedMargin);
    }
  }

  ul:not([class]) {
    > li {
      padding: var(--typoListUlLiPadding);

      &::before {
        border-radius: var(--typoListUlMarkBorderRadius);
        font-weight: var(--typoListUlMarkFontWeight);
        color: var(--typoListUlMarkColor);
        content: var(--typoListUlMarkContent);
        position: var(--typoListUlMarkPosition);
        background: var(--typoListUlMarkBg);
        width: var(--typoListUlMarkWidth);
        height: var(--typoListUlMarkHeight);
        left: var(--typoListUlMarkLeft);
        top: var(--typoListUlMarkTop);
      }
    }

    /* nested */
    ul {
      > li {
        --typoListUlLiPadding: 0 0 0 calc(1.5rem + var(--typoListUlMarkWidth));
        --typoListUlMarkWidth: var(--typoListUlNestedMarkWidth);
        --typoListUlMarkHeight: var(--typoListUlNestedMarkHeight);
        --typoListUlMarkBorderRadius: var(--typoListUlNestedMarkBorderRadius);
        --typoListUlMarkFontWeight: var(--typoListUlNestedMarkFontWeight);
        --typoListUlMarkColor: var(--typoListUlNestedMarkColor);
        --typoListUlMarkBg: var(--typoListUlNestedMarkBg);
        --typoListUlMarkPosition: var(--typoListUlNestedMarkPosition);
        --typoListUlMarkTop: var(--typoListUlNestedMarkTop);
        --typoListUlMarkLeft: var(--typoListUlNestedMarkLeft);
        --typoListUlMarkContent: var(--typoListUlNestedMarkContent);
      }
    }
  }

  ol:not([class]) {
    counter-reset: list 0;

    > li {
      padding: var(--typoListOlLiPadding);

      &::before {
        counter-increment: list;
        border-radius: var(--typoListOlMarkBorderRadius);
        content: var(--typoListOlMarkContent);
        color: var(--typoListOlMarkColor);
        position: var(--typoListOlMarkPosition);
        font-weight: var(--typoListOlMarkFontWeight);
        background: var(--typoListOlMarkBg);
        width: var(--typoListOlMarkWidth);
        height: var(--typoListOlMarkHeight);
        left: var(--typoListOlMarkLeft);
        top: var(--typoListOlMarkTop);
      }
    }

    /* nested */
    ol,
    ul {
      padding-left: var(--typoListNestedPadding);

      ol {
        padding-left: 0;
      }
    }

    ol {
      > li {
        --typoListOlMarkWidth: var(--typoListOlNestedMarkWidth);
        --typoListOlMarkHeight: var(--typoListOlNestedMarkHeight);
        --typoListOlMarkBorderRadius: var(--typoListOlNestedMarkBorderRadius);
        --typoListOlMarkFontWeight: var(--typoListOlNestedMarkFontWeight);
        --typoListOlMarkColor: var(--typoListOlNestedMarkColor);
        --typoListOlMarkBg: var(--typoListOlNestedMarkBg);
        --typoListOlMarkPosition: var(--typoListOlNestedMarkPosition);
        --typoListOlMarkTop: var(--typoListOlNestedMarkTop);
        --typoListOlMarkLeft: var(--typoListOlNestedMarkLeft);
        --typoListOlMarkContent: var(--typoListOlNestedMarkContent);
      }
    }
  }

  table:not([class]) {
    max-width: var(--typoTableMaxWidth);
    border-collapse: var(--typoTableBorderCollapse);
    table-layout: var(--typoTableLayout);
    empty-cells: var(--typoTableEmptyCells);

    &:not([width]) {
      width: var(--typoTableWidth);
    }

    td,
    th {
      position: relative;
      background-clip: padding-box;
    }

    td {
      padding: var(--typoTableTdPadding);
      border: var(--typoTableTdBorder);
      background: var(--typoTableTdBg);
      vertical-align: var(--typoTableTdAlign);
      text-align: var(--typoTableTdTextAlign);
      color: var(--typoTableTdColor);
      font-size: var(--typoTableTdFontSize);
      line-height: var(--typoTableTdLineHeight);
      min-width: var(--typoTableTdMinWidth);
      hyphens: var(--typoTableTdHyphens);
    }

    th {
      padding: var(--typoTableThPadding);
      border: var(--typoTableThBorder);
      background: var(--typoTableThBg);
      vertical-align: var(--typoTableThAlign);
      text-align: var(--typoTableThTextAlign);
      color: var(--typoTableThColor);
      font-size: var(--typoTableThFontSize);
      line-height: var(--typoTableThLineHeight);
      min-width: var(--typoTableThMinWidth);
      hyphens: var(--typoTableTdHyphens);
    }
  }

  &--isForceStyle {
    [style], li, ol, ul, dl, dd, dt, p, font, table, pre, b, u, a, strong, em, i, sup, sub, mark, kbd, blockquote, q, cite {
      &:empty {
        display: none;
      }
    }

    hr + hr,
    br + br {
      display: none;
    }

    /* stylelint-disable declaration-no-important */
    [style*="line-height"] {
      line-height: inherit !important;
    }

    [style*="font-style"] {
      font-style: inherit !important;
    }

    [style*="font-weight"] {
      font-weight: inherit !important;
    }

    [style*="text-align"] {
      text-align: inherit !important;
    }

    [style*="font-family"] {
      font-family: inherit !important;
    }

    [style*="color"] {
      color: inherit !important;
    }

    [style*="font-size"] {
      font-size: inherit !important;
    }
    /* stylelint-enable declaration-no-important */

    font {
      all: inherit;
    }
  }
}