{"version":3,"sources":["../../../src/moj/objects/_button-group.scss"],"names":[],"mappings":"AAAA,oCAAoC;;AAEpC,2EAA2E;AAC3E,CAAC;AACD,wBAAwB;AACxB,CAAC;AACD,0EAA0E;AAC1E,4BAA4B;AAC5B,6EAA6E;AAC7E,wCAAwC;AACxC;EACE,iCAAiC;EACjC,+BAA+B;EAC/B,+BAA+B;;EAE/B,kEAAkE;EAClE,qDAAqD;;EAErD,yEAAyE;EACzE,wEAAwE;EACxE,uEAAuE;EACvE,CAAC;EACD,0EAA0E;EAC1E,wEAAwE;EACxE,6BAA6B;EAC7B,mDAAmD;EACnD,aAAa;EACb,sBAAsB;EACtB,mBAAmB;;EAEnB,8EAA8E;;EAE9E,uEAAuE;EACvE,aAAa;EACb,CAAC;EACD,0EAA0E;EAC1E,8CAA8C;EAC9C;IACE,qBAAqB;IACrB,qEAAqE;IACrE,0BAA0B;IAC1B,eAAe;IACf,yBAAyB;IACzB,4CAA4C;IAC5C,kBAAkB;IAClB,kDAAkD;EACpD;;EAEA,yEAAyE;EACzE,sEAAsE;EACtE;;;IAGE,kDAAkD;EACpD;;EAEA;;IAEE,gBAAgB;EAClB;;EAEA,kEAAkE;EAClE;IACE;;;MAGE,WAAW;IACb;;IAEA;MACE,kBAAkB;IACpB;EACF;;EAEA,mEAAmE;EACnE,oDAAoD;EACpD;IACE,yDAAyD;IACzD,oCAAoC;;IAEpC,mBAAmB;IACnB,eAAe;IACf,qBAAqB;;IAErB;;;MAGE,WAAW;MACX,6BAA6B;IAC/B;;IAEA;MACE,eAAe;IACjB;;IAEA;MACE,gBAAgB;IAClB;EACF;;EAEA,qCAAqC;EACrC;IACE;MACE,gCAAgC;IAClC;EACF;;EAEA,sCAAsC;EACtC;IACE,gCAAgC;EAClC;AACF","file":"_button-group.scss","sourcesContent":["@use \"../vendor/govuk-frontend\" as *;\n\n// Button groups can be used to group buttons and links together as a group.\n//\n// Within a button group:\n//\n// - links are styled to line up visually with the buttons, including being\n//   centre-aligned on mobile\n// - spacing between the buttons and links is handled automatically, including\n//   when they wrap across multiple lines\n.moj-button-group {\n  $horizontal-gap: govuk-spacing(3);\n  $vertical-gap: govuk-spacing(3);\n  $link-spacing: govuk-spacing(1);\n\n  // These need to be kept in sync with the button component's styles\n  $button-shadow-size: $govuk-border-width-form-element;\n\n  // Flexbox is used to center-align links on mobile, align everything along\n  // the baseline on tablet and above, and to removes extra whitespace that\n  // we'd get between the buttons and links because they're inline-blocks.\n  //\n  // Ideally we'd use `gap` with flexbox rather than having to do it all with\n  // margins, but unfortunately the support isn't there (yet) and @supports\n  // doesn't play nicely with it\n  // (https://github.com/w3c/csswg-drafts/issues/3559)\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  @include govuk-responsive-margin(6, \"bottom\", $adjustment: $vertical-gap * -1);\n\n  // Give links within the button group the same font-size and line-height\n  // as buttons.\n  //\n  // Because we want the focus state to be tight around the link text, we use\n  // margins where the buttons would use padding.\n  .govuk-link {\n    display: inline-block;\n    // Prevent links overflowing their container in IE10/11 because of bug\n    // with align-items: center\n    max-width: 100%;\n    margin-top: $link-spacing;\n    margin-bottom: $link-spacing + $vertical-gap;\n    text-align: center;\n    @include govuk-font($size: 19, $line-height: 19px);\n  }\n\n  // Reduce the bottom margin to the size of the vertical gap (accommodating\n  // the button shadow) – the 'lost' margin is moved to the button-group.\n  .govuk-button,\n  .moj-button-menu__item,\n  .js-enabled & .moj-button-menu {\n    margin-bottom: $vertical-gap + $button-shadow-size;\n  }\n\n  .moj-button-menu__toggle-button,\n  .js-enabled & .moj-button-menu__item {\n    margin-bottom: 0;\n  }\n\n  // Set button menu to full width on mobile to match GOV.UK Frontend\n  @include govuk-media-query($until: tablet) {\n    .moj-button-menu,\n    .moj-button-menu__wrapper,\n    .moj-button-menu__item {\n      width: 100%;\n    }\n\n    .moj-button-menu__wrapper {\n      position: relative;\n    }\n  }\n\n  // On tablet and above, we also introduce a 'column gap' between the\n  // buttons and links in each row and left align links\n  @mixin moj-button-group-inline() {\n    // Cancel out the column gap for the last item in each row\n    margin-right: ($horizontal-gap * -1);\n\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: baseline;\n\n    .govuk-button,\n    .govuk-link,\n    .moj-button-menu {\n      width: auto;\n      margin-right: $horizontal-gap;\n    }\n\n    .moj-button-menu__toggle-button {\n      margin-right: 0;\n    }\n\n    .govuk-link {\n      text-align: left;\n    }\n  }\n\n  // Inline buttons on mobile (optional)\n  &--inline {\n    @include govuk-media-query($until: tablet) {\n      @include moj-button-group-inline;\n    }\n  }\n\n  // Inline buttons on tablet and desktop\n  @include govuk-media-query($from: tablet) {\n    @include moj-button-group-inline;\n  }\n}\n"]}