$title-color: $black !default;
$title-size: $size-3 !default;
$title-weight: $weight-semibold !default;
$title-line-height: 1.125 !default;
$title-strong-color: inherit !default;
$title-strong-weight: inherit !default;
$title-sub-size: 0.75em !default;
$title-sup-size: 0.75em !default;

$smaller-titles-weight: $weight-normal !default;

.title {
  word-break: break-word;

  em,
  span {
    font-weight: inherit;
  }

  sub {
    font-size: $title-sub-size;
  }

  sup {
    font-size: $title-sup-size;
  }

  .tag {
    vertical-align: middle;
  }

  &:not(:last-child) {
    margin-bottom: 1.5rem;
  }
}

.title {
  color: $title-color;
  font-size: $title-size;
  font-weight: $title-weight;
  line-height: $title-line-height;

  strong {
    color: $title-strong-color;
    font-weight: $title-strong-weight;
  }

  // Sizes
  @each $size in $sizes {
    $i: index($sizes, $size);

    &.is-#{$i} {
      font-size: $size;

      @if ($i > 4) {
        font-weight: $smaller-titles-weight;
      }
    }
  }
}