{"version":3,"sources":["../../../src/govuk/objects/_button-group.scss"],"names":[],"mappings":"AAAA,iBAAiB;;AAEjB;EACE,2EAA2E;EAC3E,CAAC;EACD,wBAAwB;EACxB,CAAC;EACD,0EAA0E;EAC1E,4BAA4B;EAC5B,6EAA6E;EAC7E,wCAAwC;EACxC;IACE,iCAAiC;IACjC,+BAA+B;;IAE/B,kEAAkE;IAClE,iCAAiC;IACjC,qDAAqD;;IAErD,+BAA+B;;IAE/B,8EAA8E;;IAE9E,yEAAyE;IACzE,wEAAwE;IACxE,uEAAuE;IACvE,CAAC;IACD,0EAA0E;IAC1E,wEAAwE;IACxE,6BAA6B;IAC7B,mDAAmD;IACnD,aAAa;IACb,sBAAsB;IACtB,mBAAmB;;IAEnB,uEAAuE;IACvE,aAAa;IACb,CAAC;IACD,0EAA0E;IAC1E,8CAA8C;IAC9C;MACE,kDAAkD;MAClD,qBAAqB;MACrB,qEAAqE;MACrE,0BAA0B;MAC1B,eAAe;MACf,yBAAyB;MACzB,4CAA4C;MAC5C,kBAAkB;IACpB;;IAEA,yEAAyE;IACzE,sEAAsE;IACtE;MACE,kDAAkD;IACpD;;IAEA,mEAAmE;IACnE,oDAAoD;IACpD;MACE,yDAAyD;MACzD,oCAAoC;;MAEpC,mBAAmB;MACnB,eAAe;MACf,qBAAqB;;MAErB;;QAEE,6BAA6B;MAC/B;;MAEA;QACE,gBAAgB;MAClB;IACF;EACF;AACF","file":"_button-group.scss","sourcesContent":["@import \"../base\";\n\n@include govuk-exports(\"govuk/objects/button-group\") {\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  .govuk-button-group {\n    $horizontal-gap: govuk-spacing(3);\n    $vertical-gap: govuk-spacing(3);\n\n    // These need to be kept in sync with the button component's styles\n    $button-padding: govuk-spacing(2);\n    $button-shadow-size: $govuk-border-width-form-element;\n\n    $link-spacing: govuk-spacing(1);\n\n    @include govuk-responsive-margin(6, \"bottom\", $adjustment: $vertical-gap * -1);\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    // 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      @include govuk-font($size: 19, $line-height: 19px);\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    }\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      margin-bottom: $vertical-gap + $button-shadow-size;\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    @media #{govuk-from-breakpoint(tablet)} {\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        margin-right: $horizontal-gap;\n      }\n\n      .govuk-link {\n        text-align: left;\n      }\n    }\n  }\n}\n"]}