%c-headline,
.c-headline {
  @include font-weight(normal);
  @include font-size(base);
  color: #2a3032;
  margin-top: 0;
  display: block;
  display: flex; //so things nicely vertically center, if supported.
  flex-flow: row;
  align-items: center;
  color: inherit; //Inheritted by default, however this is necessary as a first line of defense against greedy h1 through h6 selectors from other libraries.
  
  .c-headline__icon {
    margin-right: $spacing-unit;
    width: 2em;
    height: 2em;
    flex: 0 .5 2em; //Allow the icon to shrink a little if it needs to (vs having text that overflows)
    align-self: center;
  }
}









.c-headline--xxxxlarge,
.c-headline--xxxlarge,
.c-headline--xxlarge,
.c-headline--xlarge {
  @include font-family('heading');
  @include font-weight(bold);
}


%c-headline--xxxxlarge,
.c-headline--xxxxlarge {
  @include font-size(xxxxlarge);
  margin-bottom: $spacing-unit-large;
}

%c-headline--xxxlarge,
.c-headline--xxxlarge {
  @include font-size(xxxlarge);
  margin-bottom: $spacing-unit-large;
}

%c-headline--xxlarge,
.c-headline--xxlarge {
  @include font-size(xxlarge);
  margin-bottom: $spacing-unit-large;
}

%c-headline--xlarge,
.c-headline--xlarge {
  @include font-size(xlarge);
  margin-bottom: $spacing-unit;
}


%c-headline--large,
.c-headline--large {
  @include font-size(large);
  @include font-weight(semibold);
  margin-bottom: spacing(small);
}

%c-headline--medium,
.c-headline--medium {
  @include font-size(medium);
  margin-bottom: $spacing-unit;
}

%c-headline--base,
.c-headline--base {
  @include font-size(base);
  margin-bottom: $spacing-unit;
}

%c-headline--small,
.c-headline--small {
  @include font-size(small);
  margin-bottom: spacing(small);
}

%c-headline--xsmall,
.c-headline--xsmall {
  @include font-size(xsmall);
  margin-bottom: spacing(small);
}


%c-headline--sub,
.c-headline--sub {
  text-transform: uppercase;
  color: palette(gray);
  margin-bottom: 0;
}


.c-headline__text {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  flex: 0 1 auto;

/**
  * 1. I know this might potentially counter-act any
  *    line-heights set, however this + the whole
  *    "overflow-hidden" piece can potential causes lines
  *    with tigheter line heights to become unintentionally
  *    chopped off the tops / bottoms of taller letters.
  */

  .c-headline--line & {
    padding-right: $spacing-unit;
    max-width: 80%;
    line-height: initial; /** [1] **/
  }

}

.c-headline__text:before,
.c-headline__text:after {
  background-color: palette(gray, lighter);
  content: '';
  height: 2px;
  position: absolute;
  top: 50%;
  opacity: 0;
  width: 600%;
  width: 100vw;
}

.c-headline__text:before {
  right: 100%;
}
.c-headline__text:after {
  left: 100%;
}







//Default left alignment, with the line.
.c-headline--line {
  overflow: hidden;
  display: block;
  display: flex; //If supported.

  .c-headline__text:after {
    opacity: 1;
  }
}


//Center alignment. With and without the lines showing up.
.c-headline--center {
  display: block;
  display: flex;
  
  text-align: center;
  justify-content: center; //In case we support flexbox, text-align cener wouldn't work here.

  &.c-headline--line .c-headline__text:before,
  &.c-headline--line .c-headline__text:after {
    opacity: 1;
    padding-left: $spacing-unit;
    padding-right: $spacing-unit;
  }
}

//Right alignment. With and without the lines showing up.
.c-headline--right {
  text-align: right;

  .c-headline__text {
    padding-right: 0;
    padding-left: $spacing-unit;
  }

  &.c-headline--line .c-headline__text:before {
    opacity: 1;
  }

  &.c-headline--line .c-headline__text:after {
    opacity: 0;
  }
}





.c-headline--capitalize {
  text-transform: capitalize;
}

.c-headline--uppercase {
  @include uppercase();
}





.c-headline--light {
  @include font-weight(light);
}

.c-headline--regular {
  @include font-weight(regular);
}

.c-headline--italic {
  font-style: italic;
}

.c-headline--bold {
  @include font-weight(bold);
}

.c-headline--semibold {
  @include font-weight(semibold);
}


.c-headline--shadow {
  text-shadow: 0 .5px 1px rgba(0, 0, 0, .2);
}



.c-headline--muted {
  color: $text-muted;
}