@layer wind-fce.components {
  .frame-type-windfce_actionbutton,
  .call-to-action {
    height: auto;
  }

  :is(.frame-type-windfce_actionbutton, .call-to-action):has(.call-to-action-link.behavior-inline) {
    width: fit-content;
  }

  :is(.frame-type-windfce_actionbutton, .call-to-action):has(.call-to-action-link.behavior-block) {
    width: 100%;
  }

  .call-to-action-link {
    --_color: var(--wind-fce-color-primary, #bfdbfe);
    --_color-hover: var(--wind-fce-color-primary-hover, #93c5fd);
    --_color-text: var(--wind-fce-color-on-primary, #1e293b);
    --_color-foreground: var(--wind-fce-button-primary-foreground, #1d4ed8);
    --_color-foreground-hover: var(--wind-fce-button-primary-foreground-hover, #1e3a8a);
    --_icon-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3125rem;
    color: var(--_color-text);
    font: inherit;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    background: transparent;
    border: 2px solid transparent;
    border-radius: var(--wind-fce-radius, 0.5rem);
    transition: background-color var(--wind-fce-transition-duration, 180ms) ease-out,
      border-color var(--wind-fce-transition-duration, 180ms) ease-out,
      color var(--wind-fce-transition-duration, 180ms) ease-out;
  }

  .call-to-action-link:hover {
    color: var(--_color-text);
    text-decoration: none;
  }

  .call-to-action-link:focus-visible {
    outline: 3px solid var(--wind-fce-focus-color, currentColor);
    outline-offset: 3px;
  }

  .call-to-action-link.color-1 {
    --_color: var(--wind-fce-color-secondary, #fde68a);
    --_color-hover: var(--wind-fce-color-secondary-hover, #fcd34d);
    --_color-text: var(--wind-fce-color-on-secondary, #1e293b);
    --_color-foreground: var(--wind-fce-button-secondary-foreground, #92400e);
    --_color-foreground-hover: var(--wind-fce-button-secondary-foreground-hover, #78350f);
  }

  .call-to-action-link.color-2 {
    --_color: var(--wind-fce-color-accent, #a7f3d0);
    --_color-hover: var(--wind-fce-color-accent-hover, #6ee7b7);
    --_color-text: var(--wind-fce-color-on-accent, #1e293b);
    --_color-foreground: var(--wind-fce-button-accent-foreground, #047857);
    --_color-foreground-hover: var(--wind-fce-button-accent-foreground-hover, #065f46);
  }

  .call-to-action-link.color-3 {
    --_color: var(--wind-fce-color-surface, #fff);
    --_color-hover: var(--wind-fce-color-surface-hover, #f1f5f9);
    --_color-text: var(--wind-fce-color-text, #1e293b);
    --_color-foreground: var(--wind-fce-button-surface-foreground, #475569);
    --_color-foreground-hover: var(--wind-fce-button-surface-foreground-hover, #334155);
  }

  .call-to-action-link.color-4 {
    --_color: var(--wind-fce-color-dark, #cbd5e1);
    --_color-hover: var(--wind-fce-color-dark-hover, #94a3b8);
    --_color-text: var(--wind-fce-color-on-dark, #0f172a);
    --_color-foreground: var(--wind-fce-button-dark-foreground, #334155);
    --_color-foreground-hover: var(--wind-fce-button-dark-foreground-hover, #0f172a);
  }

  .call-to-action-link.layout-solid {
    background-color: var(--_color);
  }

  .call-to-action-link.layout-solid:hover {
    background-color: var(--_color-hover);
  }

  .call-to-action-link.layout-outline {
    color: var(--_color-foreground);
    border-color: var(--_color-foreground);
  }

  .call-to-action-link.layout-outline:hover {
    color: var(--_color-foreground-hover);
    border-color: var(--_color-foreground-hover);
  }

  .call-to-action-link.layout-transparent {
    color: var(--_color-foreground);
  }

  .call-to-action-link.layout-transparent:hover {
    color: var(--_color-foreground-hover);
  }

  .call-to-action-link.size-default {
    padding: 0.938rem 1.25rem;
  }

  .call-to-action-link.size-fullWidth {
    width: 100%;
    padding: 1.25rem 1.875rem;
  }

  .call-to-action-link.size-large {
    padding: 1.25rem 1.875rem;
    font-size: 1.25rem;
  }

  .call-to-action-link.size-small {
    padding: 0.625rem 1rem;
  }

  .call-to-action-link.icon-arrow-right::after,
  .call-to-action-link.icon-arrow-down::after,
  .call-to-action-link.icon-external-link::after {
    width: var(--_icon-size);
    height: var(--_icon-size);
    content: '';
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
  }

  .call-to-action-link.icon-arrow-right::after {
    mask-image: url('../Icons/arrow-right.svg');
    -webkit-mask-image: url('../Icons/arrow-right.svg');
  }

  .call-to-action-link.icon-arrow-down::after {
    mask-image: url('../Icons/arrow-down.svg');
    -webkit-mask-image: url('../Icons/arrow-down.svg');
  }

  .call-to-action-link.icon-external-link::after {
    mask-image: url('../Icons/external-link.svg');
    -webkit-mask-image: url('../Icons/external-link.svg');
  }

  @media (prefers-reduced-motion: reduce) {
    .call-to-action-link {
      transition-duration: 0.01ms;
    }
  }
}

/* Keep button text readable when unlayered site-wide link styles are present. */
.call-to-action-link.layout-solid.color-0,
.call-to-action-link.layout-solid.color-0:hover {
  color: var(--wind-fce-color-on-primary, #1e293b);
}

.call-to-action-link.layout-solid.color-1,
.call-to-action-link.layout-solid.color-1:hover {
  color: var(--wind-fce-color-on-secondary, #1e293b);
}

.call-to-action-link.layout-solid.color-2,
.call-to-action-link.layout-solid.color-2:hover {
  color: var(--wind-fce-color-on-accent, #1e293b);
}

.call-to-action-link.layout-solid.color-3,
.call-to-action-link.layout-solid.color-3:hover {
  color: var(--wind-fce-color-text, #1e293b);
}

.call-to-action-link.layout-solid.color-4,
.call-to-action-link.layout-solid.color-4:hover {
  color: var(--wind-fce-color-on-dark, #0f172a);
}

.call-to-action-link:is(.layout-outline, .layout-transparent).color-0 {
  color: var(--wind-fce-button-primary-foreground, #1d4ed8);
}

.call-to-action-link:is(.layout-outline, .layout-transparent).color-0:hover {
  color: var(--wind-fce-button-primary-foreground-hover, #1e3a8a);
}

.call-to-action-link:is(.layout-outline, .layout-transparent).color-1 {
  color: var(--wind-fce-button-secondary-foreground, #92400e);
}

.call-to-action-link:is(.layout-outline, .layout-transparent).color-1:hover {
  color: var(--wind-fce-button-secondary-foreground-hover, #78350f);
}

.call-to-action-link:is(.layout-outline, .layout-transparent).color-2 {
  color: var(--wind-fce-button-accent-foreground, #047857);
}

.call-to-action-link:is(.layout-outline, .layout-transparent).color-2:hover {
  color: var(--wind-fce-button-accent-foreground-hover, #065f46);
}

.call-to-action-link:is(.layout-outline, .layout-transparent).color-3 {
  color: var(--wind-fce-button-surface-foreground, #475569);
}

.call-to-action-link:is(.layout-outline, .layout-transparent).color-3:hover {
  color: var(--wind-fce-button-surface-foreground-hover, #334155);
}

.call-to-action-link:is(.layout-outline, .layout-transparent).color-4 {
  color: var(--wind-fce-button-dark-foreground, #334155);
}

.call-to-action-link:is(.layout-outline, .layout-transparent).color-4:hover {
  color: var(--wind-fce-button-dark-foreground-hover, #0f172a);
}

/* Keep button semantics independent from unlayered site-wide link decoration. */
a.call-to-action-link:any-link,
a.call-to-action-link:any-link:is(:hover, :active, :focus-visible) {
  text-decoration: none;
}