/*
 * PääAsia Design System
 * 03-buttons.css
 *
 * Shared button system for paaasia.fi and Hallinta.
 */

/* 1. Base */

.pa-button,
.pa-btn {
  align-items: center;
  appearance: none;
  border: var(--pa-button-border-width) solid transparent;
  border-radius: var(--pa-button-radius);
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-family: var(--pa-font-family-ui);
  font-size: var(--pa-font-size-button);
  font-weight: var(--pa-font-weight-medium);
  gap: var(--pa-spacing-s);
  justify-content: center;
  line-height: var(--pa-line-height-compact);
  min-height: var(--pa-control-height);
  padding: var(--pa-spacing-s) var(--pa-button-padding-x);
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--pa-transition-base),
    border-color var(--pa-transition-base),
    box-shadow var(--pa-transition-base),
    color var(--pa-transition-base),
    transform var(--pa-transition-base);
  user-select: none;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}

.pa-button *,
.pa-btn * {
  pointer-events: none;
}

/* 2. Variants */

.pa-button--primary,
.pa-btn--primary {
  background: var(--pa-color-primary);
  border-color: var(--pa-color-primary);
  color: var(--pa-color-inverse);
}

.pa-button--secondary,
.pa-btn--secondary {
  background: var(--pa-color-secondary);
  border-color: var(--pa-color-secondary);
  color: var(--pa-color-inverse);
}

.pa-button--outline,
.pa-btn--outline {
  background: transparent;
  border-color: var(--pa-color-primary);
  color: var(--pa-color-primary);
}

.pa-button--success,
.pa-btn--success {
  background: var(--pa-color-success);
  border-color: var(--pa-color-success);
  color: var(--pa-color-inverse);
}

.pa-button--danger,
.pa-btn--danger {
  background: var(--pa-color-danger);
  border-color: var(--pa-color-danger);
  color: var(--pa-color-inverse);
}

.pa-button--text,
.pa-btn--text {
  background: transparent;
  border-color: transparent;
  color: var(--pa-color-text-primary);
  padding-inline: var(--pa-spacing-s);
}

.pa-button--ghost,
.pa-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--pa-color-text-primary);
}

.pa-button--inverse,
.pa-btn--inverse {
  background: transparent;
  border-color: transparent;
  color: var(--pa-color-inverse);
}

.pa-button--hero,
.pa-btn--hero {
  background: transparent;
  border-color: var(--pa-color-inverse);
  border-radius: 0;
  color: var(--pa-color-inverse);
}

/* 3. Sizes */

.pa-button--compact,
.pa-btn--compact {
  min-height: var(--pa-control-height-compact);
  padding: var(--pa-spacing-xs) var(--pa-spacing-l);
}

.pa-button--full,
.pa-btn--full {
  width: 100%;
}

/* 4. Icon buttons */

.pa-button--icon,
.pa-btn--icon {
  aspect-ratio: 1;
  min-height: var(--pa-control-height);
  min-width: var(--pa-control-height);
  padding: var(--pa-spacing-s);
}

.pa-button--icon.pa-button--compact,
.pa-btn--icon.pa-btn--compact {
  min-height: var(--pa-control-height-compact);
  min-width: var(--pa-control-height-compact);
  padding: var(--pa-spacing-xs);
}

.pa-button--circle,
.pa-btn--circle {
  border-radius: 999px;
}

.pa-button--icon svg,
.pa-button--icon > i,
.pa-button--icon > img,
.pa-button--icon > .pa-icon-fallback,
.pa-btn--icon svg,
.pa-btn--icon > i,
.pa-btn--icon > img,
.pa-btn--icon > .pa-icon-fallback {
  display: block;
  flex: 0 0 auto;
  height: 1.35em;
  transform-origin: center;
  transition: transform var(--pa-transition-base);
  width: 1.35em;
}

.pa-button--icon svg,
.pa-btn--icon svg {
  fill: currentColor;
}

/* 5. Close button */

.pa-button--close {
  background: transparent;
  border-color: transparent;
  border-radius: var(--pa-radius-small);
  color: var(--pa-color-text-primary);
  font-size: 1.6rem;
  font-weight: var(--pa-font-weight-medium);
  line-height: 1;
}

.pa-button--close:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--pa-color-surface-soft);
  box-shadow: none;
  transform: none;
}

.pa-button--close:active:not(:disabled) {
  transform: scale(.92);
}

/* 6. Arrow button */

.pa-button--arrow {
  background: transparent;
  border-color: transparent;
  color: var(--pa-color-text-primary);
}

.pa-button--arrow:hover:not(:disabled):not([aria-disabled="true"]) svg,
.pa-button--arrow:hover:not(:disabled):not([aria-disabled="true"]) > i {
  transform: translateX(-2px);
}

.pa-button--arrow[data-direction="next"]:hover:not(:disabled):not([aria-disabled="true"]) svg,
.pa-button--arrow[data-direction="next"]:hover:not(:disabled):not([aria-disabled="true"]) > i {
  transform: translateX(2px);
}

/* 7. States */

.pa-button:hover:not(:disabled):not([aria-disabled="true"]),
.pa-btn:hover:not(:disabled):not([aria-disabled="true"]) {
  box-shadow: var(--pa-shadow-small);
  transform: translateY(var(--pa-lift-small));
}

.pa-button:active:not(:disabled),
.pa-btn:active:not(:disabled) {
  box-shadow: none;
  transform: translateY(0);
}

.pa-button:focus-visible,
.pa-btn:focus-visible {
  outline: var(--pa-focus-width) solid var(--pa-color-focus);
  outline-offset: var(--pa-spacing-xs);
}

.pa-button:disabled,
.pa-button[aria-disabled="true"],
.pa-btn:disabled,
.pa-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .5;
  pointer-events: none;
}

.pa-button.is-loading,
.pa-btn.is-loading {
  cursor: wait;
  opacity: .72;
  pointer-events: none;
}

.pa-button--icon:hover:not(:disabled):not([aria-disabled="true"]),
.pa-btn--icon:hover:not(:disabled):not([aria-disabled="true"]) {
  box-shadow: none;
  transform: none;
}

.pa-button--icon:hover:not(:disabled):not([aria-disabled="true"]) svg,
.pa-button--icon:hover:not(:disabled):not([aria-disabled="true"]) > i,
.pa-button--icon:hover:not(:disabled):not([aria-disabled="true"]) > img,
.pa-btn--icon:hover:not(:disabled):not([aria-disabled="true"]) svg,
.pa-btn--icon:hover:not(:disabled):not([aria-disabled="true"]) > i,
.pa-btn--icon:hover:not(:disabled):not([aria-disabled="true"]) > img {
  transform: scale(1.12);
}

/* 8. Modal integration */

.pa-modal-close {
  flex: 0 0 auto;
}

/* 9. Hallinta legacy bridge
 *
 * Existing markup may keep .pa-functional-icon during migration.
 * New markup should use:
 * .pa-button .pa-button--icon .pa-button--circle .pa-button--inverse
 */

.pa-functional-icon {
  align-items: center;
  appearance: none;
  background: transparent;
  border: var(--pa-button-border-width) solid transparent;
  border-radius: 999px;
  box-sizing: border-box;
  color: var(--pa-color-inverse);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: 44px;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 7px;
  position: relative;
  text-decoration: none;
  transition:
    background-color var(--pa-transition-base),
    border-color var(--pa-transition-base),
    color var(--pa-transition-base);
  width: 44px;
  -webkit-tap-highlight-color: transparent;
}

.pa-functional-icon svg,
.pa-functional-icon > i,
.pa-functional-icon > img,
.pa-functional-icon > .pa-header-icon-fallback {
  color: currentColor;
  display: block;
  fill: currentColor;
  height: 29px;
  transform: scale(1);
  transform-origin: center;
  transition: transform var(--pa-transition-base);
  width: 29px;
}

.pa-functional-icon:hover,
.pa-functional-icon:focus-visible,
.pa-functional-icon[aria-expanded="true"] {
  background: transparent;
  border-color: transparent;
  color: var(--pa-color-inverse);
}

.pa-functional-icon:hover svg,
.pa-functional-icon:hover > i,
.pa-functional-icon:hover > img,
.pa-functional-icon:hover > .pa-header-icon-fallback,
.js-pa-user-drawer-open:hover .pa-functional-icon svg {
  transform: scale(1.16);
}

.pa-functional-icon:focus-visible {
  outline: var(--pa-focus-width) solid var(--pa-color-focus);
  outline-offset: var(--pa-spacing-xs);
}

/* 10. Responsive */

@media (max-width: 767px) {
  .pa-functional-icon {
    height: 42px;
    min-height: 42px;
    min-width: 42px;
    width: 42px;
  }

  .pa-functional-icon svg,
  .pa-functional-icon > i,
  .pa-functional-icon > img,
  .pa-functional-icon > .pa-header-icon-fallback {
    height: 27px;
    width: 27px;
  }
}

/* 11. Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .pa-button,
  .pa-button *,
  .pa-btn,
  .pa-btn *,
  .pa-functional-icon,
  .pa-functional-icon * {
    transition: none;
  }
}