@import '~@kaizen/design-tokens/sass/spacing';
@import '~@kaizen/design-tokens/sass/typography';
@import '~@kaizen/design-tokens/sass/color';

@mixin content-styles {
  font-family: $typography-paragraph-body-font-family;
  font-weight: $typography-paragraph-body-font-weight;
  font-size: $typography-paragraph-body-font-size;
  line-height: $typography-paragraph-body-line-height;
  letter-spacing: $typography-paragraph-body-letter-spacing;
  position: relative;
  /* stylelint-disable-next-line declaration-no-important */
  white-space: pre-wrap !important; // Override unlayered TipTap styles from within kz-components layer
  box-sizing: content-box;
  color: $color-purple-800;

  > p {
    margin: 0 0 $spacing-16;
  }

  > *:last-child {
    margin-bottom: 0;

    > li:last-of-type {
      p {
        margin-bottom: 0;
      }
    }
  }

  > *:first-child {
    margin-top: 0;

    > li:first-of-type {
      p {
        margin-top: 0;
      }
    }
  }

  a {
    color: $color-blue-500;

    &:hover {
      text-decoration: none;
    }
  }

  @include nested-list-styles {
    @include nested-list-styles;
  }
}

@mixin nested-list-styles {
  ul,
  ol {
    padding-inline-start: $spacing-40; // default browser styling
  }

  ol {
    list-style-type: decimal;

    ol {
      list-style-type: lower-alpha;

      ol {
        list-style-type: lower-roman;
        @content;
      }
    }
  }

  ul {
    list-style-type: disc;

    ul {
      list-style-type: circle;

      ul {
        list-style-type: square;
        @content;
      }
    }
  }
}