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

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

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

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

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

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

.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;
}

.tweet {
  @include margin-spacing-block();

  :global(.twitter-tweet) {
    margin: 0 auto !important; // overrides inline style from Twitter
  }
}

.youtube {
  width: 100%;

  @include margin-spacing-block();

  & > div {
    padding-bottom: 56.25%;
    position: relative;
    width: 100%;
    height: 0;
  }

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.iframe {
  width: 100%;

  @include margin-spacing-block();
}