/**

* GOV.UK Logo Component
*
* Based on the existing GOV.UK logo from the header in GOV.UK Template.
*
* Notes:
*
* - The printable-crown element is an image that is included when the page is
*   printed. It's hidden for the screen media type, where the background image
*   is used instead.
*
* Example Usage:
*
* <span class="govuk-logo">
*   <img class="govuk-logo__printable-crown" src="/images/gov.uk_logotype_crown_invert_trans.png" height="32" width="36">
*   GOV.UK
* </span>
*/

.govuk-logo {

font-weight: bold;
display: inline-block;

@include screen {
  background-image: file-url('/images/gov.uk_logotype_crown.png');
  background-repeat: no-repeat;

  @include device-pixel-ratio {
    background-image: file-url('/images/gov.uk_logotype_crown-2x.png');
    background-size: 36px 32px;
  }

  @include media(tablet) {
    margin-right: 8px;
    background-position: 0 1px;
  }
}

}

.govuk-logo__printable-crown {

vertical-align: middle;
margin-right: 1px;

@include screen {
  visibility: hidden;
}

}