{"version":3,"sources":["../../../../src/nhsuk/core/objects/_button-group.scss"],"names":[],"mappings":"AAAA,gBAAgB;AAChB,uBAAuB;AACvB,oBAAoB;;AAEpB,GAAG;AACH,eAAe;AACf,EAAE;AACF,4EAA4E;AAC5E,EAAE;AACF,yBAAyB;AACzB,EAAE;AACF,2EAA2E;AAC3E,6BAA6B;AAC7B,8EAA8E;AAC9E,yCAAyC;AACzC,EAAE;AACF,wBAAwB;AACxB,GAAG;;AAEH;EACE,iCAAiC;EACjC,uCAAuC;EACvC,+BAA+B;;EAE/B;IACE,yEAAyE;IACzE,wEAAwE;IACxE,uEAAuE;IACvE,CAAC;IACD,0EAA0E;IAC1E,wEAAwE;IACxE,6BAA6B;IAC7B,mDAAmD;IACnD,aAAa;IACb,sBAAsB;IACtB,mBAAmB;;IAEnB,8EAA8E;;IAE9E,0EAA0E;IAC1E,yBAAyB;IACzB,CAAC;IACD,0EAA0E;IAC1E,8CAA8C;;IAE9C;;;;;;;MAOE,qBAAqB;MACrB,qEAAqE;MACrE,0BAA0B;MAC1B,eAAe;MACf,4CAA4C;MAC5C,iGAAiG;MACjG,kBAAkB;MAClB,2CAA2C;IAC7C;;IAEA,yEAAyE;IACzE,sEAAsE;IACtE;MACE,wDAAwD;IAC1D;;IAEA,4DAA4D;IAC5D;MACE,gCAAgC;IAClC;;IAEA,mEAAmE;IACnE,oDAAoD;IACpD;MACE,mBAAmB;MACnB,eAAe;MACf,qBAAqB;;MAErB,yDAAyD;MACzD,oCAAoC;;MAEpC;QACE,0CAA0C;MAC5C;;MAEA;;;;;;;QAOE,iDAAiD;QACjD,6BAA6B;QAC7B,sDAAsD;QACtD,gBAAgB;MAClB;;MAEA;QACE,6BAA6B;MAC/B;;MAEA;QACE,mCAAmC;MACrC;IACF;EACF;;EAEA;IACE;;;;;;;MAOE,kDAAkD;MAClD,uGAAuG;IACzG;;IAEA,mEAAmE;IACnE,oDAAoD;IACpD;MACE;;;;;;;QAOE,gDAAgD;QAChD,mCAAmC;QACnC,2CAA2C;MAC7C;IACF;EACF;AACF","file":"_button-group.scss","sourcesContent":["@use \"sass:math\";\n@use \"../settings\" as *;\n@use \"../tools\" as *;\n\n////\n/// Button group\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///\n/// @group objects/layout\n////\n\n@include nhsuk-exports(\"nhsuk/core/objects/button-group\") {\n  $horizontal-gap: nhsuk-spacing(4);\n  $horizontal-gap-small: nhsuk-spacing(3);\n  $vertical-gap: nhsuk-spacing(3);\n\n  .nhsuk-button-group {\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 nhsuk-responsive-margin(5, \"bottom\", $adjustment: $vertical-gap * -1);\n\n    // Give paragraphs and links within the button group the same font-size and\n    // line-height 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\n    p,\n    .nhsuk-body-m,\n    .nhsuk-body-s,\n    .nhsuk-body,\n    > .nhsuk-link,\n    /* stylelint-disable-next-line selector-no-qualifying-type */\n    > a:not(.nhsuk-button) {\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: $nhsuk-button-padding-top-bottom;\n      margin-bottom: calc($nhsuk-button-padding-top-bottom + $nhsuk-button-shadow-size + $vertical-gap);\n      text-align: center;\n      @include nhsuk-font(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    > .nhsuk-button {\n      margin-bottom: $nhsuk-button-shadow-size + $vertical-gap;\n    }\n\n    // Deduct vertical gap from margin when nested in form groups\n    .nhsuk-form-group &:last-child {\n      margin-bottom: nhsuk-spacing(-3);\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 #{nhsuk-from-breakpoint(tablet)} {\n      flex-direction: row;\n      flex-wrap: wrap;\n      align-items: baseline;\n\n      // Cancel out the column gap for the last item in each row\n      margin-right: ($horizontal-gap * -1);\n\n      &--small {\n        margin-right: ($horizontal-gap-small * -1);\n      }\n\n      p,\n      .nhsuk-body-m,\n      .nhsuk-body-s,\n      .nhsuk-body,\n      > .nhsuk-link,\n      /* stylelint-disable-next-line selector-no-qualifying-type */\n      > a:not(.nhsuk-button) {\n        margin: $nhsuk-button-padding-top-bottom-tablet 0;\n        margin-right: $horizontal-gap;\n        line-height: nhsuk-line-height(24px, $font-size: 19px);\n        text-align: left;\n      }\n\n      > .nhsuk-button {\n        margin-right: $horizontal-gap;\n      }\n\n      > .nhsuk-button--small {\n        margin-right: $horizontal-gap-small;\n      }\n    }\n  }\n\n  .nhsuk-button-group--small {\n    p,\n    .nhsuk-body-m,\n    .nhsuk-body-s,\n    .nhsuk-body,\n    > .nhsuk-link,\n    /* stylelint-disable-next-line selector-no-qualifying-type */\n    > a:not(.nhsuk-button) {\n      margin-top: $nhsuk-button-padding-top-bottom-small;\n      margin-bottom: calc($nhsuk-button-padding-top-bottom-small + $nhsuk-button-shadow-size + $vertical-gap);\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    @include nhsuk-media-query($from: tablet) {\n      p,\n      .nhsuk-body-m,\n      .nhsuk-body-s,\n      .nhsuk-body,\n      > .nhsuk-link,\n      /* stylelint-disable-next-line selector-no-qualifying-type */\n      > a:not(.nhsuk-button) {\n        margin: $nhsuk-button-padding-top-bottom-small 0;\n        margin-right: $horizontal-gap-small;\n        @include nhsuk-font(16, $line-height: 19px);\n      }\n    }\n  }\n}\n"]}