/**
 * Nexo Page Kit — Action Button Helper.
 *
 * Estilos reutilizáveis para botões de ação em modelos Page Kit.
 * Pode ser usado por Hero Section, CTA Section, Content Card e outros módulos.
 */

.nexo-page-kit-action-button.nexo-page-kit-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nexo-action-button-gap, var(--nexo-hero-section-button-gap, 10px));
  width: var(
    --nexo-action-button-width,
    var(--nexo-hero-section-button-width, auto)
  );
  min-width: var(
    --nexo-action-button-min-width,
    var(--nexo-hero-section-button-min-width, 220px)
  );
  min-height: var(
    --nexo-action-button-height,
    var(--nexo-hero-section-button-height, 54px)
  );
  padding-right: var(
    --nexo-action-button-padding-x,
    var(--nexo-hero-section-button-padding-x, 28px)
  );
  padding-left: var(
    --nexo-action-button-padding-x,
    var(--nexo-hero-section-button-padding-x, 28px)
  );
  border: 1px solid
    var(
      --nexo-action-button-border-color,
      var(--nexo-hero-section-button-border-color, transparent)
    );
  border-radius: var(
    --nexo-action-button-radius,
    var(--nexo-hero-section-button-radius, 7px)
  );
  color: var(
    --nexo-action-button-color,
    var(--nexo-hero-section-button-color, #ffffff)
  );
  background: var(
    --nexo-action-button-background,
    var(--nexo-hero-section-button-background, #f75c00)
  );
  font-family: var(
    --nexo-action-button-font-family,
    var(--nexo-hero-section-button-font-family, inherit)
  );
  font-size: var(
    --nexo-action-button-size,
    var(--nexo-hero-section-button-size, 13px)
  );
  font-weight: var(
    --nexo-action-button-weight,
    var(--nexo-hero-section-button-weight, 800)
  );
  font-style: var(
    --nexo-action-button-style,
    var(--nexo-hero-section-button-style, normal)
  );
  line-height: var(
    --nexo-action-button-line-height,
    var(--nexo-hero-section-button-line-height, 1.2)
  );
  letter-spacing: var(
    --nexo-action-button-letter-spacing,
    var(--nexo-hero-section-button-letter-spacing, 0)
  );
  text-align: var(
    --nexo-action-button-text-align,
    var(--nexo-hero-section-button-text-align, center)
  );
  text-decoration: none;
  text-transform: var(
    --nexo-action-button-transform,
    var(--nexo-hero-section-button-transform, uppercase)
  );
  white-space: nowrap;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.nexo-hero-section--v2[style*="--nexo-hero-section-button-width: 0px"]
  .nexo-page-kit-action-button {
  width: auto;
}

.nexo-page-kit-action-button.nexo-page-kit-action-button:hover,
.nexo-page-kit-action-button.nexo-page-kit-action-button:focus {
  color: var(
    --nexo-action-button-hover-color,
    var(
      --nexo-hero-section-button-hover-color,
      var(
        --nexo-action-button-color,
        var(--nexo-hero-section-button-color, #ffffff)
      )
    )
  );
  background: var(
    --nexo-action-button-hover-background,
    var(--nexo-hero-section-button-hover-background, #d94f00)
  );
  text-decoration: none;
  transform: translateY(-1px);
}

.nexo-page-kit-action-button__text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nexo-page-kit-action-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(
    --nexo-action-button-icon-size,
    var(--nexo-hero-section-button-icon-size, 18px)
  );
  height: var(
    --nexo-action-button-icon-size,
    var(--nexo-hero-section-button-icon-size, 18px)
  );
  color: var(
    --nexo-action-button-icon-color,
    var(--nexo-hero-section-button-icon-color, currentColor)
  );
  line-height: 1;
}

.nexo-page-kit-action-button .nexo-page-kit-action-button__icon svg {
  display: block;
  width: 1em;
  height: 1em;
}

.nexo-page-kit-action-button--icon-left .nexo-page-kit-action-button__icon {
  order: -1;
}

.nexo-page-kit-action-button--icon-right .nexo-page-kit-action-button__icon {
  order: 2;
}

@media (max-width: 767px) {
  .nexo-page-kit-action-button.nexo-page-kit-action-button {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
}