/**
 * CTA Button component.
 *
 * @package NexoBase
 */

/* ==========================================================================
   CTA wrapper
   ========================================================================== */

.nexo-cta-button-wrap {
  display: flex;
  width: 100%;
  margin: var(--nexo-cta-wrap-margin, 1.5rem 0);
}

.nexo-cta-button-wrap--left {
  justify-content: flex-start;
}

.nexo-cta-button-wrap--center {
  justify-content: center;
}

.nexo-cta-button-wrap--right {
  justify-content: flex-end;
}

.nexo-cta-button-wrap--full {
  display: block;
}

/* ==========================================================================
   CTA base
   ========================================================================== */

.nexo-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nexo-cta-button-gap, 0.5rem);
  max-width: 100%;
  min-height: var(--nexo-cta-button-min-height, 44px);

  padding: var(
      --nexo-cta-button-padding-y,
      var(--nexo-cta-padding-vertical, 16px)
    )
    var(--nexo-cta-button-padding-x, var(--nexo-cta-padding-horizontal, 28px));

  border: var(--nexo-cta-button-border-width, 2px) solid
    var(--nexo-cta-button-border-color, transparent);

  border-radius: var(
    --nexo-cta-button-border-radius,
    var(--nexo-cta-border-radius, 6px)
  );

  background: var(
    --nexo-cta-button-background,
    var(--nexo-cta-background-color, #f75c00)
  );

  color: var(--nexo-cta-button-text-color, var(--nexo-cta-text-color, #ffffff));

  box-shadow: var(
    --nexo-cta-button-box-shadow,
    var(--nexo-cta-box-shadow, none)
  );

  font-family: var(
    --nexo-font-family-body,
    "Nunito Sans",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif
  );
  font-size: var(--nexo-cta-button-font-size, var(--nexo-cta-font-size, 15px));
  font-weight: var(
    --nexo-cta-button-font-weight,
    var(--nexo-cta-font-weight, 800)
  );
  line-height: var(
    --nexo-cta-button-line-height,
    var(--nexo-cta-line-height, 1)
  );
  letter-spacing: var(--nexo-cta-button-letter-spacing, 0.01em);
  text-align: center;
  text-decoration: none;
  text-transform: var(
    --nexo-cta-button-text-transform,
    var(--nexo-cta-text-transform, uppercase)
  );

  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.nexo-cta-button__label {
  display: inline-block;
  line-height: var(--nexo-cta-label-line-height, 1);
  transform: translateY(var(--nexo-cta-label-offset-y, -1px));
}

.nexo-cta-button:hover,
.nexo-cta-button:focus {
  background: var(
    --nexo-cta-button-hover-background,
    var(--nexo-cta-hover-background-color, #d94f00)
  );
  color: var(
    --nexo-cta-button-hover-text-color,
    var(--nexo-cta-hover-text-color, #ffffff)
  );
  border-color: var(
    --nexo-cta-button-hover-border-color,
    var(--nexo-cta-button-border-color, transparent)
  );
  text-decoration: none;
}

.nexo-cta-button:focus-visible {
  outline: var(
    --nexo-cta-button-focus-outline,
    3px solid rgba(247, 92, 0, 0.35)
  );
  outline-offset: var(--nexo-cta-button-focus-outline-offset, 3px);
}

.nexo-cta-button:hover {
  transform: translateY(var(--nexo-cta-button-hover-offset-y, -1px));
}

/* ==========================================================================
   CTA button sizes
   ========================================================================== */

.nexo-cta-button--small {
  padding: var(
      --nexo-cta-button-padding-y-small,
      calc(var(--nexo-cta-padding-vertical, 16px) * 0.75)
    )
    var(
      --nexo-cta-button-padding-x-small,
      calc(var(--nexo-cta-padding-horizontal, 28px) * 0.85)
    );

  font-size: var(
    --nexo-cta-button-font-size-small,
    calc(var(--nexo-cta-font-size, 15px) * 0.9)
  );
}

.nexo-cta-button--medium {
  padding: var(
      --nexo-cta-button-padding-y,
      var(--nexo-cta-padding-vertical, 16px)
    )
    var(--nexo-cta-button-padding-x, var(--nexo-cta-padding-horizontal, 28px));

  font-size: var(--nexo-cta-button-font-size, var(--nexo-cta-font-size, 15px));
}

.nexo-cta-button--large {
  padding: var(
      --nexo-cta-button-padding-y-large,
      calc(var(--nexo-cta-padding-vertical, 16px) * 1.1)
    )
    var(
      --nexo-cta-button-padding-x-large,
      calc(var(--nexo-cta-padding-horizontal, 28px) * 1.15)
    );

  font-size: var(
    --nexo-cta-button-font-size-large,
    var(
      --nexo-cta-button-font-size,
      calc(var(--nexo-cta-font-size, 15px) * 1.05)
    )
  );
}

/* ==========================================================================
   CTA button variants
   ========================================================================== */

.nexo-cta-button--primary {
  --nexo-cta-button-background: var(--nexo-cta-background-color, #f75c00);
  --nexo-cta-button-text-color: var(--nexo-cta-text-color, #ffffff);
  --nexo-cta-button-border-color: transparent;
  --nexo-cta-button-hover-background: var(
    --nexo-cta-hover-background-color,
    #d94f00
  );
  --nexo-cta-button-hover-text-color: var(--nexo-cta-hover-text-color, #ffffff);
  --nexo-cta-button-hover-border-color: transparent;
}

.nexo-cta-button--secondary {
  --nexo-cta-button-background: var(--nexo-cta-secondary-background, #1f2937);
  --nexo-cta-button-text-color: var(--nexo-cta-secondary-text-color, #ffffff);
  --nexo-cta-button-border-color: var(
    --nexo-cta-secondary-border-color,
    #1f2937
  );
  --nexo-cta-button-hover-background: var(
    --nexo-cta-secondary-hover-background,
    #111827
  );
  --nexo-cta-button-hover-text-color: var(
    --nexo-cta-secondary-hover-text-color,
    #ffffff
  );
  --nexo-cta-button-hover-border-color: var(
    --nexo-cta-secondary-hover-border-color,
    #111827
  );
}

.nexo-cta-button--outline {
  --nexo-cta-button-background: transparent;
  --nexo-cta-button-text-color: var(
    --nexo-cta-outline-text-color,
    var(--nexo-cta-background-color, #f75c00)
  );
  --nexo-cta-button-border-color: var(
    --nexo-cta-outline-border-color,
    var(--nexo-cta-background-color, #f75c00)
  );
  --nexo-cta-button-box-shadow: none;
  --nexo-cta-button-hover-background: var(
    --nexo-cta-outline-hover-background,
    var(--nexo-cta-background-color, #f75c00)
  );
  --nexo-cta-button-hover-text-color: var(
    --nexo-cta-outline-hover-text-color,
    var(--nexo-cta-text-color, #ffffff)
  );
  --nexo-cta-button-hover-border-color: var(
    --nexo-cta-outline-hover-border-color,
    var(--nexo-cta-background-color, #f75c00)
  );
}

/* ==========================================================================
   CTA button icons
   ========================================================================== */

.nexo-cta-button.nexo-has-icon-whatsapp {
  gap: var(--nexo-whatsapp-icon-gap, 0);
}

.nexo-cta-button.nexo-has-icon-whatsapp::after {
  transform: translateY(var(--nexo-whatsapp-icon-offset-y, 0));
}

.nexo-cta-button-wrap--full .nexo-cta-button {
  display: flex;
  width: 100%;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 767px) {
  .nexo-cta-button-wrap {
    margin: var(--nexo-cta-wrap-margin-mobile, 1.25rem 0);
  }

  .nexo-cta-button {
    width: var(--nexo-cta-button-width-mobile, 100%);
    padding-right: var(--nexo-cta-button-padding-x-mobile, 1rem);
    padding-left: var(--nexo-cta-button-padding-x-mobile, 1rem);
  }

  .nexo-cta-button-wrap--left,
  .nexo-cta-button-wrap--center,
  .nexo-cta-button-wrap--right {
    justify-content: stretch;
  }
}