// Refactoring:
// https://github.com/alphagov/govuk_template/blob/master/source/assets/stylesheets/_header.scss#L252
// #global-cookie-message
// This can be used for more than one type of messsage (cookie/browser upgrade message)

// Usage:
// <div class="message-bar">
//   <div class="o-site-width-container">
//    <p class="message-bar__text">
//      This is the browser upgrade message.
//    </p>
//   </div>
// </div>

// <%= component("message-bar", {
//   js-hidden: true,
//   text: 'This is a new service – your <a href="#">feedback</a> will help us to improve it.'
// }) %>

// If it is the cookie bar, which is hidden when JS is enabled
// <div class="message-bar js-hidden">
//   <div class="o-site-width-container">
//    <p class="message-bar__text">
//      GOV.UK uses cookies to make the site simpler. <a href="https://www.gov.uk/help/cookies">Find out more about cookies</a>
//    </p>
//   </div>
// </div>

.gv-c-message-bar {
  background-color: $light-blue-25;
  // TODO: Use consistent units
  padding-top: 10px;
  padding-bottom: 10px;
}

.gv-c-message-bar__text {
  @include core-16;
}

// Let's put this in utilities when decide where they sit in the layer structure
.js-enabled .js-hidden {
  display: none;
}
