@import "../colours";
@import "../typography";
@import "../shims";
@import "../grid_layout";

// Phase banner usage:
//
// .phase-banner {
//    @include phase-banner($state: beta);
// }

@mixin phase-banner($state: alpha) {
  padding: 10px 0 8px;

  @include media(tablet) {
    padding-bottom: 10px;
  }

  border-bottom: 1px solid $border-colour;

  p {
    margin: 0;
    color: $banner-text-colour;
    @include core-16;
  }

  .phase-tag {
    @include phase-tag($state);
  }

  span {
    vertical-align: baseline;
  }
}

// Phase tag usage:
//
// Alpha
// .phase-tag {
//    @include phase-tag;
// }
//
// Beta
// .phase-tag {
//    @include phase-tag(beta);
// }

@mixin phase-tag($state: alpha) {
  @include inline-block;
  margin: 0 8px 0 0;
  padding: 2px 5px 0;

  @include bold-16($line-height: 20 / 16);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;

  color: $white;
  @if $state == alpha {
    background-color: $alpha-colour;
  } @else if $state == beta {
    background-color: $beta-colour;
  }
}

@import "../colours";
@import "../typography";
@import "../shims";
@import "../grid_layout";

// Phase banner usage:
//
// .phase-banner {
//    @include phase-banner($state: beta);
// }

@mixin phase-banner($state: alpha) {
  padding: 10px 0 8px;

  @include media(tablet) {
    padding-bottom: 10px;
  }

  border-bottom: 1px solid $border-colour;

  p {
    display: table;
    margin: 0;
    color: $banner-text-colour;
    @include core-16;
  }

  .phase-tag {
    @include phase-tag($state);
  }

  span {
    display: table-cell;
    vertical-align: baseline;
  }
}

// Phase tag usage:
//
// Alpha
// .phase-tag {
//    @include phase-tag;
// }
//
// Beta
// .phase-tag {
//    @include phase-tag(beta);
// }

@mixin phase-tag($state: alpha) {
  @include inline-block;
  margin: 0 8px 0 0;
  padding: 2px 5px 0;

  @include bold-16($line-height: 20 / 16);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;

  color: $white;
  @if $state == alpha {
    background-color: $alpha-colour;
  } @else if $state == beta {
    background-color: $beta-colour;
  }
}

Use display:table and table-cell for alignment
Use display:table and table-cell for alignment

This ensures that the line of text to the right of the phase tag lines
up with the phase tag.

For smaller screens, this text no longer wraps underneath the phase tag.
