@import "../utilities/mixins";

$title-color: getVar("text-strong") !default;
$title-family: false !default;
$title-size: getVar("size-3") !default;
$title-weight: getVar("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;

$subtitle-color: getVar("text") !default;
$subtitle-family: false !default;
$subtitle-size: getVar("size-5") !default;
$subtitle-weight: getVar("weight-normal") !default;
$subtitle-line-height: 1.25 !default;
$subtitle-strong-color: getVar("text-strong") !default;
$subtitle-strong-weight: getVar("weight-semibold") !default;
$subtitle-negative-margin: -1.25rem !default;

:root {
  @include register-vars(
    (
      title-color: #{$title-color},
      title-family: #{$title-family},
      title-size: #{$title-size},
      title-weight: #{$title-weight},
      title-line-height: #{$title-line-height},
      title-strong-color: #{$title-strong-color},
      title-strong-weight: #{$title-strong-weight},
      title-sub-size: #{$title-sub-size},
      title-sup-size: #{$title-sup-size},
      subtitle-color: #{$subtitle-color},
      subtitle-family: #{$subtitle-family},
      subtitle-size: #{$subtitle-size},
      subtitle-weight: #{$subtitle-weight},
      subtitle-line-height: #{$subtitle-line-height},
      subtitle-strong-color: #{$subtitle-strong-color},
      subtitle-strong-weight: #{$subtitle-strong-weight},
      subtitle-negative-margin: #{$subtitle-negative-margin},
    )
  );
}

.#{$class-prefix}title,
.#{$class-prefix}subtitle {
  @extend %block;

  word-break: break-word;

  em,
  span {
    font-weight: inherit;
  }

  sub {
    font-size: getVar("title-sub-size");
  }

  sup {
    font-size: getVar("title-sup-size");
  }

  .#{$class-prefix}tag {
    vertical-align: middle;
  }
}

.#{$class-prefix}title {
  color: getVar("title-color");

  @if $title-family {
    font-family: getVar("title-family");
  }

  font-size: getVar("title-size");
  font-weight: getVar("title-weight");
  line-height: getVar("title-line-height");

  strong {
    color: getVar("title-strong-color");
    font-weight: getVar("title-strong-weight");
  }

  &:not(.is-spaced) + .#{$class-prefix}subtitle {
    margin-top: getVar("subtitle-negative-margin");
  }

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

    &.is-#{$i} {
      font-size: getVar("size-", "", $i);
    }
  }
}

.#{$class-prefix}subtitle {
  color: getVar("subtitle-color");

  @if $subtitle-family {
    font-family: getVar("subtitle-family");
  }

  font-size: getVar("subtitle-size");
  font-weight: getVar("subtitle-weight");
  line-height: getVar("subtitle-line-height");

  strong {
    color: getVar("subtitle-strong-color");
    font-weight: getVar("subtitle-strong-weight");
  }

  &:not(.is-spaced) + .#{$class-prefix}title {
    margin-top: getVar("subtitle-negative-margin");
  }

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

    &.is-#{$i} {
      font-size: getVar("size-", "", $i);
    }
  }
}