.title {
  // $title-bg-colors: see __vars/colours

  position: relative;
  --background: #{$primary};
  --color: white;
  max-width: 42em; // @TODO: why? what does this relate to? make a variable
  margin-bottom: $spacing-lg;
  margin-right: $spacing-md;

  + .title {
    margin-top: -$spacing-md;
  }
}

.slab, .mini-template-grid {
  .title {
    margin-top: 0;
  }
}

.title__highlight {
  position: relative;
  display: inline;
  left: $spacing-xs;
  padding: 0.25rem;
  line-height: 1.4;
  background: $primary;
  background: var(--background, #{$primary});
  color: white;
  color: var(--color);
  box-shadow: -$spacing-xs 0 0 0 #{$primary}, $spacing-xs 0 0 0 #{$primary};
  box-shadow: -$spacing-xs 0 0 0 var(--background, #{$primary}), $spacing-xs 0 0 0 var(--background, #{$primary});
  box-decoration-break: clone;
  //border-top: 0.25rem solid transparent;
  //border-bottom: 0.25rem solid transparent;

  a {
    color: white;
    color: var(--color);
  }
}

.title--has-tail {
  margin-top:  $spacing-3xl;
  
  .title__highlight { // @TODO: Consider refactoring onto parent to reduce specificity further
    &:before {
      position: absolute;
      content: '';
      margin-top: 2px;
      top: 0;
      left: -0.5rem;
      display: block;
      width: 1000px;
      height: 2px;
      transform: rotate(225deg);
      transform-origin: top left;
      background: $primary;
      background: var(--background, #{$primary});
      transition: transform 500ms;
    }
  }

  // We could use an animation if we wanted this to only run once...
  //
  //@keyframes title__drawIn {
  //  from { transform: translate(-50vw, -50vw) rotate(225deg); }
  //  to   { transform: translate(0, 0) rotate(225deg); }
  //}

  &.js-waypoint {
    .title__highlight {
      &:before {
        transform: translate(-50vw, -50vw) rotate(225deg);
      }
    }
  }

  &.is-waypoint-reached {
    .title__highlight {
      &:before {
        transform: rotate(225deg);
      }
    }
  }

  @at-root .no-js & {
    .title__highlight {
      &:before {
        transform: rotate(225deg);
      }
    }
  }
}


@each $name, $value in $title-bg-colors {
  .title--bg-#{$name} {
    --background: #{$value};
    @if ($value == 'white') {
      // we should probably be using choose-contrast-color($value) in the if here,
      // but someone wanted $gold--tef text to be white ¯\_(ツ)_/¯
      --color: black;
    }
  }
}