@use '../../quark/link/link';
@use '../../quark/list/list';
@use '../../quark/paragraph/paragraph';
@use '../../quark/title/title-main';
@use '../../quark/title/title-part';
@use '../../quark/title/title-section';

@mixin tikui-component-spacing($spacing) {
  & {
    margin-bottom: $spacing * 1px;
  }

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

.tikui-component {
  @include tikui-component-spacing(24);

  &--markdown,
  &--render,
  &--code {
    @include tikui-component-spacing(24);
  }

  &--markdown {
    h1 {
      @include title-main.tikui-title-main;
      @include tikui-component-spacing(24);
    }

    h2 {
      @include title-section.tikui-title-section;
      @include tikui-component-spacing(24);
    }

    h3 {
      @include title-part.tikui-title-part;
      @include tikui-component-spacing(24);
    }

    p {
      @include paragraph.tikui-paragraph;
      @include tikui-component-spacing(16);
    }

    a {
      @include link.tikui-link;
    }

    ul,
    ol {
      @include list.tikui-list;
      @include tikui-component-spacing(16);
    }
  }
}