/* Tokens por defecto: --ssk-btn-* en :root (Ajustes). Modificadores .rpm-btn--* / .ssk-btn--* los pisan. */

.rpm-btn,
.ssk-btn,
.ssk-hero-carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: var(--rpm-btn-border, var(--ssk-btn-border-color, var(--ssk-color-accent, currentColor)));
  border-radius: var(--rpm-btn-radius, var(--ssk-btn-radius, 9999px));
  background-color: var(--rpm-btn-bg, var(--ssk-btn-bg, transparent));
  color: var(--rpm-btn-text, var(--ssk-btn-text-color, var(--ssk-color-accent, inherit)));
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.rpm-btn:hover,
.rpm-btn:focus-visible,
.ssk-btn:hover,
.ssk-btn:focus-visible,
.ssk-hero-carousel__btn:hover,
.ssk-hero-carousel__btn:focus-visible {
  background-color: var(--rpm-btn-bg-hover, var(--ssk-btn-bg-hover, var(--ssk-btn-bg, transparent)));
  border-color: var(--rpm-btn-border-hover, var(--ssk-btn-border-color-hover, var(--ssk-btn-border-color, currentColor)));
  color: var(--rpm-btn-text-hover, var(--ssk-btn-text-color-hover, var(--ssk-btn-text-color, inherit)));
}

.rpm-btn--solid,
.ssk-btn--solid {
  --rpm-btn-bg: var(--color-rpm-accent, var(--ssk-color-accent));
  --rpm-btn-border: var(--color-rpm-accent, var(--ssk-color-accent));
  --rpm-btn-text: #fff;
  --rpm-btn-bg-hover: var(--color-rpm-accent-dark, color-mix(in srgb, var(--ssk-color-accent, #c45a45) 78%, #000));
  --rpm-btn-border-hover: var(--color-rpm-accent-dark, color-mix(in srgb, var(--ssk-color-accent, #c45a45) 78%, #000));
  --rpm-btn-text-hover: #fff;
}

.rpm-btn--outline,
.ssk-btn--outline {
  --rpm-btn-bg: transparent;
  --rpm-btn-border: var(--color-rpm-accent, var(--ssk-color-accent));
  --rpm-btn-text: var(--color-rpm-accent, var(--ssk-color-accent));
  --rpm-btn-bg-hover: var(--color-rpm-accent, var(--ssk-color-accent));
  --rpm-btn-border-hover: var(--color-rpm-accent, var(--ssk-color-accent));
  --rpm-btn-text-hover: #fff;
}

.rpm-btn--shape-round,
.ssk-btn--shape-round {
  --rpm-btn-radius: 9999px;
}

.rpm-btn--shape-rounded,
.ssk-btn--shape-rounded {
  --rpm-btn-radius: 0.75rem;
}

.rpm-btn--shape-square,
.ssk-btn--shape-square {
  --rpm-btn-radius: 0;
}