/** Action Bar default styles
  * Alignment:
    1. All the action items are aligned to the right by default.
    2. .Link.is-red actions are aligned to the left of action bar.
    3. To align any other action items to the left use TW utility `me-auto`.

  * Colors:
    1. By default all buttons (that are not .Link) are styled as btu-button-primary.
    2. Actions with class .action-cancel or .icon-action-cancel are styled as gray secondary buttons.
    3. To style any other button as a secondary gray, use TW utility !btu-button-gray.
*/

.ActionBar {
  @apply sticky bottom-0 z-10 flex items-center justify-end gap-3 border-y border-gray-200 bg-white px-[var(--Widget-padding,_theme(spacing.6))] py-3;

  button,
  .Button {
    @apply btu-button btu-button-md;
  }
}

.ActionBar:not(.is-top)
  > button:not(.Link, .action-cancel, .icon-action-cancel),
.ActionBar:not(.is-top)
  > .Button:not(.Link, .action-cancel, .icon-action-cancel) {
  @apply btu-button-primary;
}

.ActionBar .action-save,
.ActionBar [name='action-upload'] {
  @apply disabled:opacity-50;
}

.ActionBar .Link.is-red:not(.icon-action-cancel, .action-cancel) {
  @apply -order-1 me-auto focus-visible:ring-error-100 focus:text-error-700 focus-visible:ring-4 focus-visible:ring-offset-error-600;
}

.ActionBar .action-cancel,
.ActionBar .icon-action-cancel {
  @apply btu-button btu-button-gray btu-button-md -order-1;
}
