@use "../../../styles/int.scss";

@mixin margin-spacing($top: int.$spacing-4, $bottom: int.$spacing-4) {
  margin-top: $top;
  margin-bottom: $bottom;
}

@mixin margin-spacing-title() {
  @include margin-spacing($top: int.$spacing-8);
}

@mixin margin-spacing-block() {
  @include margin-spacing($top: int.$spacing-8, $bottom: int.$spacing-8);
}

.container {
  & > *:first-child {
    margin-top: 0;
  }

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

.paragraph {
  @include margin-spacing();
  @include int.serif();

  &.sans {
      @include int.sans();
  }
}

.heading-one {
  @include margin-spacing-title();
  @include int.title($size: "700");
}

.heading-two {
  @include margin-spacing-title();
  @include int.title($size: "600");
}

.heading-three {
  @include margin-spacing-title();
  @include int.title($size: "500");
}

.heading-four {
  @include margin-spacing-title();
  @include int.title($size: "400");
}

.heading-five {
  @include margin-spacing-title();
  @include int.title($size: "300");
}

.heading-six {
  @include margin-spacing-title();
  @include int.title($size: "200");
}

.blockquote {
  margin-left: 0;
  background-color: int.$altblack-10;
  padding: int.$spacing-4 int.$spacing-4 int.$spacing-4 int.$spacing-8;

  @include margin-spacing-block();
  @include int.serif();
}

.bulleted-list {
  padding-left: int.$spacing-8;

  @include margin-spacing();
}

.numbered-list {
  padding-left: int.$spacing-8;

  @include margin-spacing();
}

.list-item {
  @include int.serif();
}

.image {
  display: block;
  width: 100%;

  @include margin-spacing-block();
}

.link {
  color: int.$blue-90;
  text-decoration: none;
}

.strong {
  font-weight: bold;
}

.emphasis {
  font-style: italic;
}

.code {
  font-family: monospace;
  font-size: 1em;
}