{"version":3,"sources":["../../../../src/nhsuk/core/objects/_button-group.scss"],"names":[],"mappings":"AAAA,gBAAgB;AAChB,uBAAuB;AACvB,oBAAoB;;AAEpB;EACE,2EAA2E;EAC3E,CAAC;EACD,wBAAwB;EACxB,CAAC;EACD,0EAA0E;EAC1E,4BAA4B;EAC5B,6EAA6E;EAC7E,wCAAwC;EACxC;IACE,iCAAiC;IACjC,uCAAuC;IACvC,+BAA+B;;IAE/B,kEAAkE;IAClE,wDAAwD;IACxD,yDAAyD;IACzD,sDAAsD;;IAEtD,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;IAC9C;;;;;MAKE,qBAAqB;MACrB,qEAAqE;MACrE,0BAA0B;MAC1B,eAAe;MACf,6CAA6C;MAC7C,kGAAkG;MAClG,kBAAkB;MAClB,2CAA2C;IAC7C;;IAEA;;;;;MAKE,4CAA4C;MAC5C,iGAAiG;IACnG;;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;;;;;QAKE,4CAA4C;QAC5C,6BAA6B;QAC7B,sDAAsD;QACtD,gBAAgB;MAClB;;MAEA;;;;;QAKE,0CAA0C;QAC1C,mCAAmC;QACnC,2CAA2C;MAC7C;;MAEA;QACE,6BAA6B;MAC/B;;MAEA;QACE,mCAAmC;MACrC;IACF;EACF;AACF","file":"_button-group.scss","sourcesContent":["@use \"sass:math\";\n@use \"../settings\" as *;\n@use \"../tools\" as *;\n\n@include nhsuk-exports(\"nhsuk/core/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  .nhsuk-button-group {\n    $horizontal-gap: nhsuk-spacing(4);\n    $horizontal-gap-small: nhsuk-spacing(3);\n    $vertical-gap: nhsuk-spacing(3);\n\n    // These need to be kept in sync with the button component's styles\n    $button-padding-top-bottom-mobile: nhsuk-px-to-rem(10px);\n    $button-padding-top-bottom-desktop: nhsuk-px-to-rem(14px);\n    $button-padding-top-bottom-small: nhsuk-px-to-rem(6px);\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 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    .nhsuk-body,\n    .nhsuk-body-m,\n    p,\n    > .nhsuk-link,\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: $button-padding-top-bottom-mobile;\n      margin-bottom: calc($button-padding-top-bottom-mobile + $nhsuk-button-shadow-size + $vertical-gap);\n      text-align: center;\n      @include nhsuk-font(19, $line-height: 19px);\n    }\n\n    &--small .nhsuk-body,\n    &--small .nhsuk-body-m,\n    &--small p,\n    &--small > .nhsuk-link,\n    &--small > a:not(.nhsuk-button) {\n      margin-top: $button-padding-top-bottom-small;\n      margin-bottom: calc($button-padding-top-bottom-small + $nhsuk-button-shadow-size + $vertical-gap);\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    @include nhsuk-media-query($from: 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      .nhsuk-body,\n      .nhsuk-body-m,\n      p,\n      > .nhsuk-link,\n      > a:not(.nhsuk-button) {\n        margin: $button-padding-top-bottom-desktop 0;\n        margin-right: $horizontal-gap;\n        line-height: nhsuk-line-height(24px, $font-size: 19px);\n        text-align: left;\n      }\n\n      &--small .nhsuk-body,\n      &--small .nhsuk-body-m,\n      &--small p,\n      &--small > .nhsuk-link,\n      &--small > a:not(.nhsuk-button) {\n        margin: $button-padding-top-bottom-small 0;\n        margin-right: $horizontal-gap-small;\n        @include nhsuk-font(16, $line-height: 19px);\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"]}