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

@import "../button/index";

@include govuk-exports("govuk/component/cookie-banner") {
  // This needs to be kept in sync with the header component's styles
  $border-bottom-width: govuk-spacing(2);

  .govuk-cookie-banner {
    padding-top: govuk-spacing(4);
    // The component does not set bottom spacing. The bottom spacing should be
    // created by the items inside the component.

    // Visually separate the cookie banner from content underneath when user
    // changes colours in their browser.
    border-bottom: $border-bottom-width solid transparent;

    color: govuk-functional-colour(surface-text);
    background-color: govuk-functional-colour(surface-background);
  }

  // Support older browsers which don't hide elements with the `hidden` attribute
  // when user hides the whole cookie banner with a 'Hide' button.
  .govuk-cookie-banner[hidden] {
    display: none;
  }

  .govuk-cookie-banner__message {
    // Remove the extra height added by the separator border.
    margin-bottom: -$border-bottom-width;

    &[hidden] {
      // Support older browsers which don't hide elements with the `hidden`
      // attribute when the visibility of cookie and replacement messages is
      // toggled.
      display: none;
    }

    &:focus {
      // Remove the native visible focus indicator when the element is
      // programmatically focused.
      //
      // The focused cookie banner is the first element on the page and the last
      // thing the user interacted with prior to it gaining focus. We therefore
      // assume that moving focus to it is not going to surprise users, and that
      // giving it a visible focus indicator could be more confusing than
      // helpful, especially as the element is not normally keyboard operable.
      //
      // We have flagged this in the research section of the guidance as
      // something to monitor.
      //
      // A related discussion: https://github.com/w3c/wcag/issues/1001
      outline: none;
    }
  }
}

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