@use "../../tools/media";
@use "../../tools/spacing";

.tna-button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: spacing.space(1);

  @include spacing.space-above;

  @include media.on-tiny {
    flex-direction: column;
    align-items: stretch;
  }

  &--small {
    gap: spacing.space(0.5);
  }

  &--centred {
    justify-content: center;
  }

  &--full {
    justify-content: stretch;

    @include media.on-mobile {
      flex-direction: column;

      align-items: stretch;
    }

    .tna-button {
      margin: 0;

      flex: 1;
    }
  }
}