/**
 * @file components/buttons.css
 * @description Shared button styles: one slightly rounded look
 *   (--pl-radius-button) with colours from local_css/theme.css.
 *
 *   Buttons opt in with classes; anything without .pl-btn is left alone.
 *     .pl-btn            required base: shape, type, spacing, focus ring.
 *     .pl-btn--primary   main action: teal fill, white text.
 *     .pl-btn--secondary lower-emphasis action: white fill, teal border and
 *                        text (not the blue --pl-color-secondary token).
 *     .pl-btn--danger    destructive action: white fill, red border and text,
 *                        red fill on hover.
 *     .pl-btn--link      looks like a text link: no fill or border, underlined.
 *     .pl-btn--sm        compact size for table cells and toolbars.
 *   Use one colour modifier. Works on button, a and input[type=submit]. Keep
 *   existing ids and JS hook classes on the element.
 *
 *   Each variant sets text colour and background together for default, hover,
 *   active and disabled, so Bootstrap .btn, a:hover or SweetAlert rules cannot
 *   change the text colour. :focus-visible only adds the focus ring. Disabled
 *   is :disabled, [aria-disabled="true"] or .is-disabled, without opacity so
 *   the text stays readable.
 *
 *   Bootstrap: an element that also has .btn gets the same values through
 *   Bootstrap's --bs-btn-* properties. Prefer .pl-btn without .btn.
 *
 *   SweetAlert2: use Swal.mixin({ buttonsStyling: false, customClass: {
 *   confirmButton: "pl-btn pl-btn--primary", cancelButton:
 *   "pl-btn pl-btn--secondary" } }). The .swal2-actions rules below restore
 *   the gap and repeat the variant colours one class deeper, so base.css's
 *   .swal2-confirm background does not win.
 *
 *   base.html loads this after theme.css and before base.css; pages do not
 *   link it. A page stylesheet should only set layout (margin, width, display)
 *   on its own hook class, not .pl-btn colours.
 *
 * @author Murtaza Lightwala
 * @since 30 Oct 2026
 *
 * Edit log:
 *   30 Oct 2026 - Created with the primary, secondary, danger and link
 *     variants, the small size, Bootstrap .btn support and SweetAlert2 buttons.
 *   31 Oct 2026 - Keep variant colours on SweetAlert2 confirm, cancel and deny.
 */

.pl-btn {
  --bs-btn-padding-x: 20px;
  --bs-btn-padding-y: 8px;
  --bs-btn-font-size: var(--pl-font-size-base);
  --bs-btn-font-weight: 700;
  --bs-btn-line-height: 1.25;
  --bs-btn-border-width: 2px;
  --bs-btn-border-radius: var(--pl-radius-button);
  --bs-btn-focus-box-shadow: none;
  --bs-btn-disabled-opacity: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pl-space-2);
  min-height: 40px;
  margin: 0;
  padding: 8px 20px;
  border: 2px solid transparent;
  border-radius: var(--pl-radius-button);
  background-image: none;
  box-shadow: none;
  font-family: inherit;
  font-size: var(--pl-font-size-base);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  opacity: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pl-btn:hover,
.pl-btn:active {
  text-decoration: none;
}

.pl-btn:focus {
  outline: none;
}

.pl-btn:focus-visible {
  outline: var(--pl-focus-ring-width) solid var(--pl-color-focus-ring);
  outline-offset: var(--pl-focus-ring-offset);
  box-shadow: none;
}

.pl-btn--sm {
  --bs-btn-padding-x: 12px;
  --bs-btn-padding-y: 6px;
  --bs-btn-font-size: var(--pl-font-size-sm);
  min-height: 32px;
  padding: 6px 12px;
  font-size: var(--pl-font-size-sm);
}

/* Primary: filled teal. */
.pl-btn--primary {
  --bs-btn-color: var(--pl-color-on-primary);
  --bs-btn-bg: var(--pl-color-primary);
  --bs-btn-border-color: var(--pl-color-primary);
  --bs-btn-hover-color: var(--pl-color-on-primary);
  --bs-btn-hover-bg: var(--pl-color-primary-hover);
  --bs-btn-hover-border-color: var(--pl-color-primary-hover);
  --bs-btn-active-color: var(--pl-color-on-primary);
  --bs-btn-active-bg: var(--pl-color-navy);
  --bs-btn-active-border-color: var(--pl-color-navy);
  --bs-btn-disabled-color: var(--pl-color-disabled-text);
  --bs-btn-disabled-bg: var(--pl-color-disabled-bg);
  --bs-btn-disabled-border-color: var(--pl-color-disabled-bg);
  color: var(--pl-color-on-primary);
  background-color: var(--pl-color-primary);
  border-color: var(--pl-color-primary);
}

.pl-btn--primary:hover {
  color: var(--pl-color-on-primary);
  background-color: var(--pl-color-primary-hover);
  border-color: var(--pl-color-primary-hover);
}

.pl-btn--primary:active {
  color: var(--pl-color-on-primary);
  background-color: var(--pl-color-navy);
  border-color: var(--pl-color-navy);
}

/* Secondary: white fill, teal outline. */
.pl-btn--secondary {
  --bs-btn-color: var(--pl-color-primary);
  --bs-btn-bg: var(--pl-color-surface);
  --bs-btn-border-color: var(--pl-color-primary);
  --bs-btn-hover-color: var(--pl-color-primary-hover);
  --bs-btn-hover-bg: var(--pl-color-surface-tint);
  --bs-btn-hover-border-color: var(--pl-color-primary-hover);
  --bs-btn-active-color: var(--pl-color-primary-hover);
  --bs-btn-active-bg: var(--pl-color-surface-highlight);
  --bs-btn-active-border-color: var(--pl-color-primary-hover);
  --bs-btn-disabled-color: var(--pl-color-disabled-text);
  --bs-btn-disabled-bg: var(--pl-color-disabled-bg);
  --bs-btn-disabled-border-color: var(--pl-color-disabled-bg);
  color: var(--pl-color-primary);
  background-color: var(--pl-color-surface);
  border-color: var(--pl-color-primary);
}

.pl-btn--secondary:hover {
  color: var(--pl-color-primary-hover);
  background-color: var(--pl-color-surface-tint);
  border-color: var(--pl-color-primary-hover);
}

.pl-btn--secondary:active {
  color: var(--pl-color-primary-hover);
  background-color: var(--pl-color-surface-highlight);
  border-color: var(--pl-color-primary-hover);
}

/* Danger: red outline, filled red on hover. */
.pl-btn--danger {
  --bs-btn-color: var(--pl-color-danger-text);
  --bs-btn-bg: var(--pl-color-surface);
  --bs-btn-border-color: var(--pl-color-danger-text);
  --bs-btn-hover-color: var(--pl-color-text-inverse);
  --bs-btn-hover-bg: var(--pl-color-danger-text);
  --bs-btn-hover-border-color: var(--pl-color-danger-text);
  --bs-btn-active-color: var(--pl-color-text-inverse);
  --bs-btn-active-bg: var(--pl-color-danger-text);
  --bs-btn-active-border-color: var(--pl-color-danger-text);
  --bs-btn-disabled-color: var(--pl-color-disabled-text);
  --bs-btn-disabled-bg: var(--pl-color-disabled-bg);
  --bs-btn-disabled-border-color: var(--pl-color-disabled-bg);
  color: var(--pl-color-danger-text);
  background-color: var(--pl-color-surface);
  border-color: var(--pl-color-danger-text);
}

.pl-btn--danger:hover,
.pl-btn--danger:active {
  color: var(--pl-color-text-inverse);
  background-color: var(--pl-color-danger-text);
  border-color: var(--pl-color-danger-text);
}

/* Link: text only. */
.pl-btn--link {
  --bs-btn-color: var(--pl-color-primary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--pl-color-primary-hover);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--pl-color-primary-hover);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--pl-color-disabled-text);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
  min-height: 0;
  padding: 2px 0;
  color: var(--pl-color-primary);
  background-color: transparent;
  border-color: transparent;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pl-btn--link:hover,
.pl-btn--link:active {
  color: var(--pl-color-primary-hover);
  background-color: transparent;
  border-color: transparent;
  text-decoration: underline;
}

/* Disabled look shared by the filled variants. Must stay after them. */
.pl-btn:disabled,
.pl-btn[aria-disabled="true"],
.pl-btn.is-disabled {
  color: var(--pl-color-disabled-text);
  background-color: var(--pl-color-disabled-bg);
  border-color: var(--pl-color-disabled-bg);
  cursor: not-allowed;
  opacity: 1;
}

.pl-btn--link:disabled,
.pl-btn--link[aria-disabled="true"],
.pl-btn--link.is-disabled {
  color: var(--pl-color-disabled-text);
  background-color: transparent;
  border-color: transparent;
  text-decoration: none;
}

/* Gap between the pop-up buttons. */
.swal2-actions > .pl-btn {
  margin: 0.3125em;
}

/* base.css loads after this file and sets a teal background on every
   .swal2-confirm, so each variant repeats its colours here with one more
   class. */
.swal2-actions > .pl-btn--primary {
  color: var(--pl-color-on-primary);
  background: var(--pl-color-primary);
  border-color: var(--pl-color-primary);
}

.swal2-actions > .pl-btn--primary:hover {
  color: var(--pl-color-on-primary);
  background: var(--pl-color-primary-hover);
  border-color: var(--pl-color-primary-hover);
}

.swal2-actions > .pl-btn--primary:active {
  color: var(--pl-color-on-primary);
  background: var(--pl-color-navy);
  border-color: var(--pl-color-navy);
}

.swal2-actions > .pl-btn--secondary {
  color: var(--pl-color-primary);
  background: var(--pl-color-surface);
  border-color: var(--pl-color-primary);
}

.swal2-actions > .pl-btn--secondary:hover {
  color: var(--pl-color-primary-hover);
  background: var(--pl-color-surface-tint);
  border-color: var(--pl-color-primary-hover);
}

.swal2-actions > .pl-btn--secondary:active {
  color: var(--pl-color-primary-hover);
  background: var(--pl-color-surface-highlight);
  border-color: var(--pl-color-primary-hover);
}

.swal2-actions > .pl-btn--danger {
  color: var(--pl-color-danger-text);
  background: var(--pl-color-surface);
  border-color: var(--pl-color-danger-text);
}

.swal2-actions > .pl-btn--danger:hover,
.swal2-actions > .pl-btn--danger:active {
  color: var(--pl-color-text-inverse);
  background: var(--pl-color-danger-text);
  border-color: var(--pl-color-danger-text);
}

.swal2-actions > .pl-btn--link {
  color: var(--pl-color-primary);
  background: transparent;
  border-color: transparent;
}

.swal2-actions > .pl-btn--link:hover,
.swal2-actions > .pl-btn--link:active {
  color: var(--pl-color-primary-hover);
  background: transparent;
  border-color: transparent;
}

/* Disabled pop-up buttons, e.g. while the loader shows. Keep after the variants. */
.swal2-actions > .pl-btn:disabled,
.swal2-actions > .pl-btn[aria-disabled="true"],
.swal2-actions > .pl-btn.is-disabled {
  color: var(--pl-color-disabled-text);
  background: var(--pl-color-disabled-bg);
  border-color: var(--pl-color-disabled-bg);
}

.swal2-actions > .pl-btn--link:disabled,
.swal2-actions > .pl-btn--link[aria-disabled="true"],
.swal2-actions > .pl-btn--link.is-disabled {
  color: var(--pl-color-disabled-text);
  background: transparent;
  border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .pl-btn {
    transition: none;
  }
}