/**
 * SaarlandToday global action button system.
 */

.page-wrapper :where(
  .button,
  .st-button,
  .btn,
  .form-submit,
  .form-actions a,
  .form-actions button,
  input[type='submit'],
  input[type='button'],
  input[type='reset'],
  .wdsb-error-button a
):not(
  .st-offcanvas-trigger,
  .st-menubar-scroller__btn,
  .nav__menu-button,
  .st-bookmark-icon,
  .st-bookmark-icon__button
) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--st-button-control-size, 1rem) * 2.75);
  padding: 0.5em 1.3em;
  border: 1px solid var(--color-transparent);
  border-radius: var(--st-button-radius, 6px);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.page-wrapper a.button,
.page-wrapper input.button,
.page-wrapper button.button,
.page-wrapper a.solo-button,
.page-wrapper input.solo-button,
.page-wrapper button.solo-button,
.page-wrapper input.form-submit,
.page-wrapper button.form-submit,
.page-wrapper input[type='submit'],
.page-wrapper button[type='submit'],
.page-wrapper .ui-dialog-buttonpane button {
  color: var(--st-button-primary-text, var(--color-fff));
  background-color: var(--st-button-primary-bg, var(--color-0006ff));
  border-color: var(--st-button-primary-bg, var(--color-0006ff));
}

.page-wrapper a.button:hover,
.page-wrapper input.button:hover,
.page-wrapper button.button:hover,
.page-wrapper a.solo-button:hover,
.page-wrapper input.solo-button:hover,
.page-wrapper button.solo-button:hover,
.page-wrapper input.form-submit:hover,
.page-wrapper button.form-submit:hover,
.page-wrapper input[type='submit']:hover,
.page-wrapper button[type='submit']:hover,
.page-wrapper .ui-dialog-buttonpane button:hover {
  color: var(--st-button-primary-text, var(--color-fff));
  background-color: var(--st-button-primary-bg-hover, var(--color-2563eb));
  border-color: var(--st-button-primary-bg-hover, var(--color-2563eb));
}

.page-wrapper :where(.form-actions, .action-links, .wdsb-error-button-container) {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  flex-grow: 0;
}

.page-wrapper :where(.form-actions, .action-links, .wdsb-error-button-container) > :where(a, button, input) {
  margin-inline: 0;
}

.page-wrapper :where(
  .button,
  .st-button,
  .btn-primary,
  .st-button--primary,
  .button--primary,
  .form-submit,
  input[type='submit'],
  .wdsb-error-button a
):not(
  .btn-secondary,
  .st-button--secondary,
  .button--secondary,
  .btn-danger,
  .st-button--danger,
  .button--danger,
  .button--destructive
) {
  color: var(--st-button-primary-text, var(--color-fff));
  background-color: var(--st-button-primary-bg, var(--color-0006ff));
  border-color: var(--st-button-primary-bg, var(--color-0006ff));
}

.page-wrapper :where(
  .button,
  .st-button,
  .btn-primary,
  .st-button--primary,
  .button--primary,
  .form-submit,
  input[type='submit'],
  .wdsb-error-button a
):not(
  .btn-secondary,
  .st-button--secondary,
  .button--secondary,
  .btn-danger,
  .st-button--danger,
  .button--danger,
  .button--destructive
):hover {
  color: var(--st-button-primary-text, var(--color-fff));
  background-color: var(--st-button-primary-bg-hover, var(--color-2563eb));
  border-color: var(--st-button-primary-bg-hover, var(--color-2563eb));
}

.page-wrapper :where(.btn-secondary, .st-button--secondary, .button--secondary, input[type='reset'], .form-actions a:not(.btn-primary):not(.st-button--primary):not(.button--primary):not(.btn-danger):not(.st-button--danger):not(.button--danger):not(.button--destructive)) {
  color: var(--st-button-secondary-text, var(--color-374151));
  background-color: var(--st-button-secondary-bg, var(--color-transparent));
  border-color: var(--st-button-secondary-border, var(--color-d1d5db));
}

.page-wrapper :where(.btn-secondary, .st-button--secondary, .button--secondary, input[type='reset'], .form-actions a:not(.btn-primary):not(.st-button--primary):not(.button--primary):not(.btn-danger):not(.st-button--danger):not(.button--danger):not(.button--destructive)):hover {
  color: var(--st-button-secondary-text, var(--color-374151));
  background-color: var(--st-button-secondary-bg-hover, color-mix(in srgb, var(--color-current) 8%, var(--color-transparent)));
  border-color: var(--st-button-secondary-text, var(--color-374151));
}

.page-wrapper :where(.btn-danger, .st-button--danger, .button--danger, .button--destructive, .form-submit--danger) {
  color: var(--st-button-danger-text, var(--color-fff));
  background-color: var(--st-button-danger-bg, var(--color-dc2626));
  border-color: var(--st-button-danger-bg, var(--color-dc2626));
}

.page-wrapper :where(.btn-danger, .st-button--danger, .button--danger, .button--destructive, .form-submit--danger):hover {
  color: var(--st-button-danger-text, var(--color-fff));
  background-color: var(--st-button-danger-bg-hover, var(--color-b91c1c));
  border-color: var(--st-button-danger-bg-hover, var(--color-b91c1c));
}

.page-wrapper :where(
  .button,
  .st-button,
  .btn,
  .form-submit,
  .form-actions a,
  .form-actions button,
  input[type='submit'],
  input[type='button'],
  input[type='reset'],
  .wdsb-error-button a
):focus-visible {
  outline: 3px solid var(--st-button-focus-ring, color-mix(in srgb, var(--color-current) 35%, var(--color-transparent)));
  outline-offset: 3px;
}

.page-wrapper :where(
  .button,
  .st-button,
  .btn,
  .form-submit,
  .form-actions a,
  .form-actions button,
  input[type='submit'],
  input[type='button'],
  input[type='reset'],
  .wdsb-error-button a
):active {
  transform: translateY(1px);
}

.page-wrapper :where(.form-actions .btn-primary, .form-actions .st-button--primary, .form-actions .button--primary, .form-actions .form-submit, .form-actions input[type='submit']) {
  order: 1;
}

.page-wrapper :where(.form-actions .btn-secondary, .form-actions .st-button--secondary, .form-actions .button--secondary, .form-actions input[type='reset'], .form-actions a:not(.btn-primary):not(.st-button--primary):not(.button--primary)) {
  order: 2;
}

.page-wrapper :where(
  .form-actions .wdsb-modal-btn-cancel,
  .form-actions .regional-external-modal__cancel,
  .form-actions #modal-cancel,
  .form-actions [data-drupal-selector='edit-cancel']
) {
  order: 10;
}

@media (min-width: 768px) {
  .page-wrapper :where(.form-actions, .action-links, .wdsb-error-button-container) {
    gap: 20px;
  }
}