@use "../theme.scss" as *;
@use "../button.scss" as *;

.loose-button-group {
  display: flex;
  flex-direction: row;

  & button,
  & .button {
    margin-left: 0.5em;
    margin-right: 0.5em;

    &:first-of-type {
      margin-left: 0;
    }

    &:last-of-type {
      margin-right: 0;
    }
  }

  &.vertical {
    flex-direction: column;
    & button,
    & .button {
      margin-left: unset;
      margin-right: unset;
      margin-bottom: $form-control-vertical-gap;
    }
  }
}