@use "./media";

// A mixin to align buttons (also wrapped).
// The buttons align using all available space on mobile. They should not be resized or aligned on desktop.
// Resolves the alignment issue when a button is wrapped with a tooltip.
@mixin base {
  display: flex;
  gap: var(--padding-2x);

  :global(button) {
    // all buttons inside the toolbar should be full width on mobile and be aligned by flex parameters.
    width: 100%;
  }

  & > :global(*) {
    // 50% to make sure the button is not smaller in the tooltip, because of the wrong width calculation.
    flex: 1 1 50%;
  }

  @include media.min-width(small) {
    // stop using full width on anything wider than mobile
    & > :global(*) {
      flex: none;
    }

    :global(button) {
      // reset 100%
      width: auto;
    }
  }

  @include media.min-width(medium) {
    justify-content: flex-end;
  }
}