/**
 * Shared action primitive.
 *
 * Visual variants are intentionally limited to primary, secondary, outline
 * and text.
 * Component styles may control placement and width, but must not redefine the
 * interaction colors, border, radius, typography or state transitions.
 */

.c-button {
  --button-background: transparent;
  --button-background-hover: transparent;
  --button-background-active: transparent;
  --button-border-color: transparent;
  --button-border-color-hover: transparent;
  --button-color: currentcolor;
  --button-color-hover: currentcolor;
  --button-shadow: none;

  display: inline-flex;
  min-height: var(--size-target-min);
  padding-block: var(--space-2);
  padding-inline: var(--space-5);
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: var(--border-width-default) solid var(--button-border-color);
  border-radius: var(--radius-control-lg);
  background: var(--button-background);
  color: var(--button-color);
  box-shadow: var(--button-shadow);
  font-size: var(--type-label-lg-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--type-label-lg-line-height);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard),
    color var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard);
}

.c-button:hover {
  border-color: var(--button-border-color-hover);
  background: var(--button-background-hover);
  color: var(--button-color-hover);
}

.c-button:active {
  background: var(--button-background-active);
}

.c-button--primary {
  --button-background: var(--color-brand);
  --button-background-hover: var(--color-brand-hover);
  --button-background-active: var(--color-brand-active);
  --button-border-color: var(--color-brand);
  --button-border-color-hover: var(--color-brand-hover);
  --button-color: var(--color-text-inverse);
  --button-color-hover: var(--color-text-inverse);
  --button-shadow: var(--shadow-sm);
}

.c-button--secondary {
  --button-background: var(--color-secondary-500);
  --button-background-hover: var(--color-secondary-600);
  --button-background-active: var(--color-secondary-700);
  --button-border-color: var(--color-secondary-500);
  --button-border-color-hover: var(--color-secondary-600);
  --button-color: var(--color-text-inverse);
  --button-color-hover: var(--color-text-inverse);
}

.c-button--outline {
  --button-background: transparent;
  --button-background-hover: var(--color-brand-subtle);
  --button-background-active: var(--color-primary-100);
  --button-border-color: var(--color-brand);
  --button-border-color-hover: var(--color-brand-hover);
  --button-color: var(--color-brand);
  --button-color-hover: var(--color-brand-hover);
}

.c-button--text {
  --button-background: transparent;
  --button-background-hover: transparent;
  --button-background-active: transparent;
  --button-border-color: transparent;
  --button-border-color-hover: transparent;
  --button-color: var(--color-info-500);
  --button-color-hover: var(--color-info-700);

  padding-inline: var(--space-2);
  box-shadow: none;
}

.c-button--view-all,
.c-button--view-more {
  flex: 0 0 auto;
  font-size: var(--type-label-lg-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--type-label-lg-line-height);
  white-space: nowrap;
}

.c-button--view-more {
  direction: rtl;
}

.c-button--view-more::after {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  flex: 0 0 var(--size-icon-md);
  background: currentcolor;
  content: "";
  -webkit-mask: url("../../icons/blog/arrow-left.svg") center / contain no-repeat;
  mask: url("../../icons/blog/arrow-left.svg") center / contain no-repeat;
}

.c-button--compact {
  min-height: 1.875rem;
  padding-block: 0.25rem;
  padding-inline: 0.875rem;
  font-size: var(--type-caption-sm-size);
  line-height: var(--type-caption-sm-line-height);
}

.c-button--large {
  min-height: 3.125rem;
  padding-block: 0.6875rem;
  padding-inline: 1.625rem;
  font-size: var(--type-body-xl-size);
  line-height: var(--type-body-xl-line-height);
}

.c-button--block {
  width: 100%;
}

.c-button:disabled,
.c-button[aria-disabled="true"] {
  --button-background: var(--color-surface-disabled);
  --button-background-hover: var(--color-surface-disabled);
  --button-background-active: var(--color-surface-disabled);
  --button-border-color: var(--color-border-default);
  --button-border-color-hover: var(--color-border-default);
  --button-color: var(--color-text-disabled);
  --button-color-hover: var(--color-text-disabled);
  --button-shadow: none;

  cursor: not-allowed;
  opacity: 1;
  pointer-events: none;
}

.c-button--secondary:disabled,
.c-button--secondary[aria-disabled="true"] {
  --button-background: var(--color-secondary-500);
  --button-background-hover: var(--color-secondary-500);
  --button-background-active: var(--color-secondary-500);
  --button-border-color: var(--color-secondary-500);
  --button-border-color-hover: var(--color-secondary-500);
  --button-color: var(--color-text-inverse);
  --button-color-hover: var(--color-text-inverse);

  opacity: 0.45;
}

.c-button[hidden] {
  display: none;
}