@use '../components/button-size-small' as *;
@use '../components/button-size-large' as *;
@use '../components/button-size-small' as *;
@use '../components/button' as *;

// Common styles shared between block variations, Ref: DEV-732
// Match all wp-block-*
[class*='wp-block'] {
  // Padding variations (default: M padding)
  &.is-style-has-m-padding {
    padding-bottom: var(--spacing-block-padding-m);
    padding-top: var(--spacing-block-padding-m);
  }

  &.is-style-has-l-padding {
    padding-bottom: var(--spacing-block-padding-l);
    padding-top: var(--spacing-block-padding-l);
  }

  &.is-style-no-padding {
    padding-bottom: 0;
    padding-top: 0;
  }
}

// Buttons
.wp-block-buttons {
  justify-content: flex-start; // Override WordPress default center alignment
}

.wp-block-button {
  text-align: left;
}

.wp-block-button__link {
  @include button();
  display: inline-block;
  text-align: center;
}

.button {
  @include button();
}

.button-small {
  @include button();
  @include button-size-small();
}

.button-large {
  @include button();
  @include button-size-large();
}