// $side is which side do you want the angle on
// $c-bg is the color you want the title background to be
// $c-page is the color of the page it is being rendered on

@mixin ma-heading-colored($c-bg:transparent,$direction:right,$c-page:white) {
  $offset: 55px;
  
  @if ($c-bg == transparent) {
    font-size: 1.375rem;
    letter-spacing: $letter-spacing-large;
    line-height: 1.39;
    margin-bottom: 20px;
    overflow: hidden;
    padding: 12px 20px 10px 20px;
    position: relative;
    text-transform: uppercase;

    @media ($bp-small-min) {
      margin-bottom: 30px;
      padding: 18px 25px 14px 25px;
    }

    &:after {
      content: "";
      height: 200%;
      position: absolute;
        top: 0;
        left: 100%;
      transform: rotate(30deg);
      transform-origin: top left;
      width: 100%;
    }

    .main-content--two .page-content & {
      padding-right: $offset;

      @media ($bp-large-min) {
        margin-right: -$offset + 20px;
        margin-bottom: 50px;
      }

      @media ($bp-x-large-min) {
        margin-right: -$offset;
        padding-right: $offset + 20px;

      }

    }
    // left (shows as right and then switches to left)

    .sidebar & {

      @media ($bp-large-max) {
        padding-right: $offset;
      }

      @media ($bp-large-min) {
        padding-left: $offset;
        margin-left: -$offset + 20px;

        &:after {
          top: auto;
          right: 100%;
          bottom: 0;
          left: auto;
          transform-origin: bottom right;
        }
      }

      @media ($bp-x-large-min) {
        margin-left: -$offset;
        padding-left: $offset;
      }
    }

    @if ($direction == left) {

      @media ($bp-large-max) {
        padding-right: $offset;
      }

      @media ($bp-large-min) {
        padding-left: $offset;
        margin-left: -$offset + 20px;

        &:after {
          top: auto;
          right: 100%;
          bottom: 0;
          left: auto;
          transform-origin: bottom right;
        }
      }

      @media ($bp-x-large-min) {
        margin-left: -$offset;
        padding-left: $offset;
      }
    }
  }

  @if ($c-bg != transparent) {
    background-color: $c-bg;
    color: $c-white;

    &:after {
      background-color: $c-page;
    }
  }
}
