{"version":3,"sources":["../../../../src/govuk/components/cookie-banner/_index.scss"],"names":[],"mappings":"AAAA,oBAAoB;;AAEpB,yBAAyB;;AAEzB;EACE,kEAAkE;EAClE,sCAAsC;;EAEtC;IACE,6BAA6B;IAC7B,yEAAyE;IACzE,4CAA4C;;IAE5C,uEAAuE;IACvE,mCAAmC;IACnC,qDAAqD;;IAErD,4CAA4C;IAC5C,6DAA6D;EAC/D;;EAEA,8EAA8E;EAC9E,+DAA+D;EAC/D;IACE,aAAa;EACf;;EAEA;IACE,wDAAwD;IACxD,oCAAoC;;IAEpC;MACE,oEAAoE;MACpE,qEAAqE;MACrE,UAAU;MACV,aAAa;IACf;;IAEA;MACE,+DAA+D;MAC/D,2BAA2B;MAC3B,CAAC;MACD,yEAAyE;MACzE,wEAAwE;MACxE,yEAAyE;MACzE,kEAAkE;MAClE,uEAAuE;MACvE,CAAC;MACD,iEAAiE;MACjE,uBAAuB;MACvB,CAAC;MACD,+DAA+D;MAC/D,aAAa;IACf;EACF;AACF","file":"_index.scss","sourcesContent":["@import \"../../base\";\n\n@import \"../button/index\";\n\n@include govuk-exports(\"govuk/component/cookie-banner\") {\n  // This needs to be kept in sync with the header component's styles\n  $border-bottom-width: govuk-spacing(2);\n\n  .govuk-cookie-banner {\n    padding-top: govuk-spacing(4);\n    // The component does not set bottom spacing. The bottom spacing should be\n    // created by the items inside the component.\n\n    // Visually separate the cookie banner from content underneath when user\n    // changes colours in their browser.\n    border-bottom: $border-bottom-width solid transparent;\n\n    color: govuk-functional-colour(surface-text);\n    background-color: govuk-functional-colour(surface-background);\n  }\n\n  // Support older browsers which don't hide elements with the `hidden` attribute\n  // when user hides the whole cookie banner with a 'Hide' button.\n  .govuk-cookie-banner[hidden] {\n    display: none;\n  }\n\n  .govuk-cookie-banner__message {\n    // Remove the extra height added by the separator border.\n    margin-bottom: -$border-bottom-width;\n\n    &[hidden] {\n      // Support older browsers which don't hide elements with the `hidden`\n      // attribute when the visibility of cookie and replacement messages is\n      // toggled.\n      display: none;\n    }\n\n    &:focus {\n      // Remove the native visible focus indicator when the element is\n      // programmatically focused.\n      //\n      // The focused cookie banner is the first element on the page and the last\n      // thing the user interacted with prior to it gaining focus. We therefore\n      // assume that moving focus to it is not going to surprise users, and that\n      // giving it a visible focus indicator could be more confusing than\n      // helpful, especially as the element is not normally keyboard operable.\n      //\n      // We have flagged this in the research section of the guidance as\n      // something to monitor.\n      //\n      // A related discussion: https://github.com/w3c/wcag/issues/1001\n      outline: none;\n    }\n  }\n}\n"]}