@import "../../base";

@import "../tag/index";

@include govuk-exports("govuk/component/phase-banner") {
  .govuk-phase-banner {
    padding-top: govuk-spacing(2);
    padding-bottom: govuk-spacing(2);

    border-bottom: 1px solid;
    border-bottom-color: govuk-functional-colour(border);
  }

  // If the phase banner is already contained within a .govuk-width-container,
  // don't double up the left and right margins on narrow viewports.
  .govuk-width-container .govuk-phase-banner.govuk-width-container {
    margin-right: 0;
    margin-left: 0;
  }

  .govuk-phase-banner__content {
    @include govuk-font($size: 16);

    display: table;
    margin: 0;
    color: govuk-functional-colour(text);
  }

  .govuk-phase-banner__content__tag {
    @include govuk-font-size($size: 16);
    margin-right: govuk-spacing(3);

    @media #{govuk-from-breakpoint(tablet)} {
      margin-right: govuk-spacing(2);
    }
  }

  .govuk-phase-banner__text {
    display: table-cell;
    vertical-align: middle;
  }
}

/*# sourceMappingURL=_index.scss.map */