@import "../_colours";
@import "../_typography";

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

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

  p {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 15px;

    color: $text-colour;
    @include core-16;
  }

  a, a:link, a:visited, a:active {
    color: $text-colour;
  }

  a:hover {
    color: $text-colour;
  }
}

@mixin phase-tag($state: alpha) {
  display: block;
  float: left;

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

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

  margin: 3px 10px 0 0;
  padding: 2px 5px 0;
}

@import "../_colours";
@import "../_typography";
@import "../_shims";

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

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

  p {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 15px;

    color: $text-colour;
    @include core-16;
  }

  a, a:link, a:visited, a:active {
    color: $text-colour;
  }

  a:hover {
    color: $text-colour;
  }
}

@mixin phase-tag($state: alpha) {
  @include inline-block;

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

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

  margin: 3px 10px 0 5px;
  padding: 2px 5px 0;
}

Use inline-block for phase tag
Use inline-block for phase tag

Floating the tag meant it was dependent on other elements in the layout, of scope of these styles. Using inline-block doesn't interfere with the layout of other elements.
