.zf-action-button {
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    border: none;
    cursor: pointer;
    align-items: center;
    gap: 8px;
    color: #fff;
    border-radius: 10rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.3s;
    position: relative;
}

.zf-action-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--zf-primary-light, rgba(59, 130, 246, 0.3));
}

.zf-action-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Sizes */
.size-small { padding: 6px 10px 6px 7px; font-size: 0.875rem; }
.size-medium { padding: 7px 13px 7px 9px; font-size: 0.9375rem; }
.size-large { padding: 10px 16px 10px 12px; font-size: 1rem; }

/* Icon Wrapper Sizing */
.size-small .button__icon-wrapper { width: 16px; height: 16px; }
.size-medium .button__icon-wrapper { width: 20px; height: 20px; }
.size-large .button__icon-wrapper { width: 24px; height: 24px; }

/* Icon Wrapper Base */
.button__icon-wrapper {
    flex-shrink: 0;
    position: relative;
    background-color: #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.button__icon-wrapper svg { width: 8px; }

/* Variants */
.variant-primary { background-color: var(--blue, #1870D1); }
.variant-primary .button__icon-wrapper { color: var(--blue, #1870D1); }
.variant-primary:hover:not(:disabled) { background-color: #000; }
.variant-primary:hover:not(:disabled) .button__icon-wrapper { color: #000; }

.variant-secondary { background-color: var(--zf-secondary-bg, #f3f4f6); color: var(--zf-text-primary, #1f2937); }
.variant-secondary .button__icon-wrapper { color: #767676; }
.variant-secondary:hover:not(:disabled) { background-color: var(--zf-secondary-hover, #e5e7eb); }
.variant-secondary:hover:not(:disabled) .button__icon-wrapper { color: #555; }

.variant-success { background-color: #10b981; }
.variant-success .button__icon-wrapper { color: #10b981; }
.variant-success:hover:not(:disabled) { background-color: #059669; }
.variant-success:hover:not(:disabled) .button__icon-wrapper { color: #059669; }

.variant-danger { background-color: var(--zf-error, #dc2626); }
.variant-danger .button__icon-wrapper { color: var(--zf-error, #dc2626); }
.variant-danger:hover:not(:disabled) { background-color: var(--zf-error-dark, #b91c1c); }
.variant-danger:hover:not(:disabled) .button__icon-wrapper { color: var(--zf-error-dark, #b91c1c); }

/* Full Width */
.full-width { width: 100%; }

/* Loading State */
.loading .button-content { opacity: 0; }
.loading .button__icon-wrapper { display: none; }

.spinner {
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Arrow Direction Animations (8 directions) */
/* TopRight */
.direction-top-right .button__icon-svg--copy { position: absolute; transform: translate(-150%, 150%); }
.direction-top-right:hover:not(:disabled) .button__icon-svg:first-child { transition: transform 0.3s ease-in-out; transform: translate(150%, -150%); }
.direction-top-right:hover:not(:disabled) .button__icon-svg--copy { transition: transform 0.3s ease-in-out 0.1s; transform: translate(0); }

/* BottomRight */
.direction-bottom-right .button__icon-svg--copy { position: absolute; transform: translate(-150%, -150%); }
.direction-bottom-right:hover:not(:disabled) .button__icon-svg:first-child { transition: transform 0.3s ease-in-out; transform: translate(150%, 150%); }
.direction-bottom-right:hover:not(:disabled) .button__icon-svg--copy { transition: transform 0.3s ease-in-out 0.1s; transform: translate(0); }

/* TopLeft */
.direction-top-left .button__icon-svg--copy { position: absolute; transform: translate(150%, 150%); }
.direction-top-left:hover:not(:disabled) .button__icon-svg:first-child { transition: transform 0.3s ease-in-out; transform: translate(-150%, -150%); }
.direction-top-left:hover:not(:disabled) .button__icon-svg--copy { transition: transform 0.3s ease-in-out 0.1s; transform: translate(0); }

/* BottomLeft */
.direction-bottom-left .button__icon-svg--copy { position: absolute; transform: translate(150%, -150%); }
.direction-bottom-left:hover:not(:disabled) .button__icon-svg:first-child { transition: transform 0.3s ease-in-out; transform: translate(-150%, 150%); }
.direction-bottom-left:hover:not(:disabled) .button__icon-svg--copy { transition: transform 0.3s ease-in-out 0.1s; transform: translate(0); }

/* Right */
.direction-right .button__icon-svg--copy { position: absolute; transform: translate(-150%, 0); }
.direction-right:hover:not(:disabled) .button__icon-svg:first-child { transition: transform 0.3s ease-in-out; transform: translate(150%, 0); }
.direction-right:hover:not(:disabled) .button__icon-svg--copy { transition: transform 0.3s ease-in-out 0.1s; transform: translate(0); }

/* Left */
.direction-left .button__icon-svg--copy { position: absolute; transform: translate(150%, 0); }
.direction-left:hover:not(:disabled) .button__icon-svg:first-child { transition: transform 0.3s ease-in-out; transform: translate(-150%, 0); }
.direction-left:hover:not(:disabled) .button__icon-svg--copy { transition: transform 0.3s ease-in-out 0.1s; transform: translate(0); }

/* Up */
.direction-up .button__icon-svg--copy { position: absolute; transform: translate(0, 150%); }
.direction-up:hover:not(:disabled) .button__icon-svg:first-child { transition: transform 0.3s ease-in-out; transform: translate(0, -150%); }
.direction-up:hover:not(:disabled) .button__icon-svg--copy { transition: transform 0.3s ease-in-out 0.1s; transform: translate(0); }

/* Down */
.direction-down .button__icon-svg--copy { position: absolute; transform: translate(0, -150%); }
.direction-down:hover:not(:disabled) .button__icon-svg:first-child { transition: transform 0.3s ease-in-out; transform: translate(0, 150%); }
.direction-down:hover:not(:disabled) .button__icon-svg--copy { transition: transform 0.3s ease-in-out 0.1s; transform: translate(0); }