/* ========================================
   BASE BUTTON
======================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55vw;

  min-height: clamp(42px, 3.2vw, 48px);
  padding: clamp(10px, 0.85vw, 12px)
    clamp(18px, 1.65vw, 24px);

  font-size: var(--button-primary-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--button-primary-line);
  white-space: nowrap;

  border: 1px solid transparent;
  border-radius: var(--radius-round);

  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
}

.button:focus-visible {
  outline: 2px solid var(--border-accent);
  outline-offset: 3px;
}

.button:disabled,
.button[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.45;
}


/* ========================================
   PRIMARY BUTTON
======================================== */

.button--primary {
  color: var(--text-inverse-primary);
  background-color: var(--action-default);
  border-color: var(--action-default);
}

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

.button--primary-outline {
  color: var(--action-default);
  background-color: transparent;
  border-color: var(--action-default);
}

.button--primary-outline:hover {
  color: var(--text-inverse-primary);
  background-color: var(--action-default);
}

.button--primary-ghost {
  min-height: auto;
  padding-inline: 0;
  color: var(--action-default);
  background-color: transparent;
  border-color: transparent;
  border-radius: 0;
}

.button--primary-ghost:hover {
  color: var(--action-hover);
  transform: none;
}


/* ========================================
   SECONDARY / DOWNLOAD BUTTON
======================================== */

.button--secondary {
  width: 100%;

  color: var(--text-primary);
  background-color: var(--bg-base);
  border-color: var(--border-default-2);

  border-radius: var(--radius-small);
}

.button--secondary:hover {
  color: var(--text-accent);
  border-color: var(--border-accent);
}

.button--secondary-accent {
  color: var(--text-accent);
  border-color: var(--border-accent);
}

.button--secondary-dark {
  color: var(--text-inverse-primary);
  background-color: var(--action-default);
  border-color: var(--action-default);
}

.button--secondary-dark:hover {
  background-color: var(--action-hover);
  border-color: var(--action-hover);
}


/* ========================================
   CONTENT LINK
======================================== */

.content-link {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 0.9vw, 14px);

  font-size: var(--body-small-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--body-small-line);

  color: var(--text-secondary);

  transition: color var(--transition-fast);
}

.content-link__number {
  min-width: clamp(18px, 1.5vw, 22px);
  color: inherit;
}

.content-link:hover,
.content-link.is-active {
  color: var(--text-heading-brand);
}

.content-link.is-active .content-link__number {
  color: var(--text-accent);
}

.content-link:focus-visible {
  outline: 2px solid var(--border-accent);
  outline-offset: 4px;
  border-radius: 2px;
}


/* ========================================
   TEXT LINK
======================================== */

.text-link {
  display: inline;

  font-size: var(--body-small-size);
  line-height: var(--body-small-line);

  color: var(--white-70);

  transition: color var(--transition-fast);
}

.text-link:hover {
  color: var(--text-inverse-primary);
}

.text-link:focus-visible {
  outline: 2px solid var(--border-subtle-inverse);
  outline-offset: 3px;
}


/* ========================================
   ICON BUTTON
======================================== */

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: clamp(40px, 3.3vw, 48px);
  aspect-ratio: 1;

  color: var(--action-default);
  background-color: var(--bg-base);
  border: 1px solid var(--border-default-2);
  border-radius: var(--radius-small);

  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.icon-button:hover {
  color: var(--text-accent);
  border-color: var(--border-accent);
  background-color: var(--color-brand-pale);
}

.icon-button:focus-visible {
  outline: 2px solid var(--border-accent);
  outline-offset: 3px;
}

.icon-button svg {
  width: clamp(14px, 1.2vw, 18px);
  height: clamp(14px, 1.2vw, 18px);
  flex-shrink: 0;
}


/* ========================================
   ICONS INSIDE BUTTONS
======================================== */

.button__icon {
  width: clamp(14px, 1.1vw, 16px);
  height: clamp(14px, 1.1vw, 16px);
  flex-shrink: 0;
}

.button__icon--arrow {
  transform: rotate(-45deg);
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 767px) {
  .button {
    gap: 2vw;

    min-height: clamp(42px, 12vw, 48px);
    padding:
      clamp(10px, 3vw, 12px)
      clamp(18px, 5vw, 22px);
  }

  .button--primary,
  .button--primary-outline {
    width: 100%;
  }

  .button--primary-ghost {
    width: auto;
  }

  .icon-button {
    width: clamp(40px, 12vw, 48px);
  }

  .button__icon,
  .icon-button svg {
    width: clamp(14px, 4vw, 18px);
    height: clamp(14px, 4vw, 18px);
  }
}