@use "../vendor/govuk-frontend" as *;

// Button groups can be used to group buttons and links together as a group.
//
// Within a button group:
//
// - links are styled to line up visually with the buttons, including being
//   centre-aligned on mobile
// - spacing between the buttons and links is handled automatically, including
//   when they wrap across multiple lines
.moj-button-group {
  $horizontal-gap: govuk-spacing(3);
  $vertical-gap: govuk-spacing(3);
  $link-spacing: govuk-spacing(1);

  // These need to be kept in sync with the button component's styles
  $button-shadow-size: $govuk-border-width-form-element;

  // Flexbox is used to center-align links on mobile, align everything along
  // the baseline on tablet and above, and to removes extra whitespace that
  // we'd get between the buttons and links because they're inline-blocks.
  //
  // Ideally we'd use `gap` with flexbox rather than having to do it all with
  // margins, but unfortunately the support isn't there (yet) and @supports
  // doesn't play nicely with it
  // (https://github.com/w3c/csswg-drafts/issues/3559)
  display: flex;
  flex-direction: column;
  align-items: center;

  @include govuk-responsive-margin(6, "bottom", $adjustment: $vertical-gap * -1);

  // Give links within the button group the same font-size and line-height
  // as buttons.
  //
  // Because we want the focus state to be tight around the link text, we use
  // margins where the buttons would use padding.
  .govuk-link {
    display: inline-block;
    // Prevent links overflowing their container in IE10/11 because of bug
    // with align-items: center
    max-width: 100%;
    margin-top: $link-spacing;
    margin-bottom: $link-spacing + $vertical-gap;
    text-align: center;
    @include govuk-font($size: 19, $line-height: 19px);
  }

  // Reduce the bottom margin to the size of the vertical gap (accommodating
  // the button shadow) – the 'lost' margin is moved to the button-group.
  .govuk-button,
  .moj-button-menu__item,
  .js-enabled & .moj-button-menu {
    margin-bottom: $vertical-gap + $button-shadow-size;
  }

  .moj-button-menu__toggle-button,
  .js-enabled & .moj-button-menu__item {
    margin-bottom: 0;
  }

  // Set button menu to full width on mobile to match GOV.UK Frontend
  @include govuk-media-query($until: tablet) {
    .moj-button-menu,
    .moj-button-menu__wrapper,
    .moj-button-menu__item {
      width: 100%;
    }

    .moj-button-menu__wrapper {
      position: relative;
    }
  }

  // On tablet and above, we also introduce a 'column gap' between the
  // buttons and links in each row and left align links
  @mixin moj-button-group-inline() {
    // Cancel out the column gap for the last item in each row
    margin-right: ($horizontal-gap * -1);

    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;

    .govuk-button,
    .govuk-link,
    .moj-button-menu {
      width: auto;
      margin-right: $horizontal-gap;
    }

    .moj-button-menu__toggle-button {
      margin-right: 0;
    }

    .govuk-link {
      text-align: left;
    }
  }

  // Inline buttons on mobile (optional)
  &--inline {
    @include govuk-media-query($until: tablet) {
      @include moj-button-group-inline;
    }
  }

  // Inline buttons on tablet and desktop
  @include govuk-media-query($from: tablet) {
    @include moj-button-group-inline;
  }
}

/*# sourceMappingURL=_button-group.scss.map */