/**
 * Button Component - CSS
 * 
 * Ported from ui-core
 * Source: src/components/Atoms/Button/Button.tsx
 * 
 * Tailwind classes have been converted to vanilla CSS.
 * See README.md in this directory for sync instructions.
 */

/* ===== Base Button Styles ===== */
.ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 9999px; /* rounded-full (pill shape) */
    padding: 8px 16px;
    font-weight: 400; /* normal - ui-core Button doesn't specify font-weight, inherits default */
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    border: none; /* No border by default - prevents dark border on click */
    outline: none;
    position: relative;
    overflow: hidden; /* For ripple effect */
    transition: background-color 0.2s ease, color 0.2s ease;
    /* Note: box-shadow NOT in transition - focus ring should appear immediately */
    -webkit-user-select: none;
    user-select: none;
}

.ui-button:focus {
    outline: none;
}

.ui-button:focus-visible {
    outline: none;
}

.ui-button:active {
    outline: none;
}

/* ===== Variants ===== */

/* Primary - Green background, white text */
.ui-button.primary,
.ui-button--primary {
    background-color: var(--brand-green, #00c57b);
    color: white;
    border-color: transparent;
}

.ui-button.primary:hover,
.ui-button--primary:hover {
    background-color: var(--green-700, #00a368);
}

.ui-button.primary:active,
.ui-button--primary:active {
    background-color: var(--green-800, #008a58);
}

/* Focus ring - 4px with 30% opacity (matches ui-core focus:ring-4 focus:ring-green/30) */
.ui-button.primary:focus,
.ui-button--primary:focus {
    box-shadow: 0 0 0 4px rgba(0, 197, 123, 0.3);
}

/* Keyboard focus - outer offset ring for accessibility */
.ui-button.primary:focus-visible,
.ui-button--primary:focus-visible {
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--brand-green, #00c57b);
}

.ui-button.primary:disabled,
.ui-button--primary:disabled {
    background-color: var(--grey-300, #d1d5db);
    color: var(--grey-500, #6b7280);
    cursor: not-allowed;
}

/* Secondary - White background, green border and text */
.ui-button.secondary,
.ui-button--secondary {
    background-color: white;
    color: var(--brand-green, #00c57b);
    border: 1px solid var(--brand-green, #00c57b);
}

.ui-button.secondary:hover,
.ui-button--secondary:hover {
    color: var(--green-700, #00a368);
    border: 1px solid var(--green-700, #00a368);
}

.ui-button.secondary:active,
.ui-button--secondary:active {
    color: var(--green-800, #008a58);
    border: 1px solid var(--green-800, #008a58);
}

/* Focus ring - matches ui-core focus:ring-2 */
.ui-button.secondary:focus,
.ui-button--secondary:focus {
    box-shadow: 0 0 0 4px rgba(0, 197, 123, 0.3);
}

/* Keyboard focus - outer offset ring for accessibility */
.ui-button.secondary:focus-visible,
.ui-button--secondary:focus-visible {
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--brand-green, #00c57b);
}

.ui-button.secondary:disabled,
.ui-button--secondary:disabled {
    background-color: var(--grey-300, #d1d5db);
    color: var(--grey-500, #6b7280);
    border: 1px solid var(--grey-300, #d1d5db);
    cursor: not-allowed;
}

/* Ghost - Transparent background, green text, no border */
.ui-button.ghost,
.ui-button--ghost {
    background-color: transparent;
    color: var(--brand-green, #00c57b);
    border-color: transparent;
    box-shadow: none;
}

.ui-button.ghost:hover,
.ui-button--ghost:hover {
    color: var(--green-700, #00a368);
    background-color: rgba(0, 197, 123, 0.08);
}

.ui-button.ghost:active,
.ui-button--ghost:active {
    color: var(--green-800, #008a58);
}

/* Focus ring */
.ui-button.ghost:focus,
.ui-button--ghost:focus {
    box-shadow: 0 0 0 4px rgba(0, 197, 123, 0.3);
}

/* Keyboard focus - outer offset ring for accessibility */
.ui-button.ghost:focus-visible,
.ui-button--ghost:focus-visible {
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--brand-green, #00c57b);
}

.ui-button.ghost:disabled,
.ui-button--ghost:disabled {
    color: var(--grey-500, #6b7280);
    cursor: not-allowed;
}

/* Primary Error - Red background, white text */
.ui-button.primary-error,
.ui-button--primary-error {
    background-color: var(--red-500, #ef4444);
    color: white;
    border-color: transparent;
}

.ui-button.primary-error:hover,
.ui-button--primary-error:hover {
    background-color: var(--red-600, #dc2626);
}

.ui-button.primary-error:active,
.ui-button--primary-error:active {
    background-color: var(--red-800, #991b1b);
}

/* Focus ring - 4px with 30% opacity (matches ui-core focus:ring-4 focus:ring-red-500/30) */
.ui-button.primary-error:focus,
.ui-button--primary-error:focus {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.3);
}

/* Keyboard focus - outer offset ring for accessibility */
.ui-button.primary-error:focus-visible,
.ui-button--primary-error:focus-visible {
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--red-500, #ef4444);
}

/* Secondary Error - White background, red border and text */
.ui-button.secondary-error,
.ui-button--secondary-error {
    background-color: white;
    color: var(--red-500, #ef4444);
    border: 1px solid var(--red-500, #ef4444);
}

.ui-button.secondary-error:hover,
.ui-button--secondary-error:hover {
    color: var(--red-600, #dc2626);
    border: 1px solid var(--red-600, #dc2626);
}

.ui-button.secondary-error:active,
.ui-button--secondary-error:active {
    color: var(--red-800, #991b1b);
    border: 1px solid var(--red-800, #991b1b);
}

/* Focus ring */
.ui-button.secondary-error:focus,
.ui-button--secondary-error:focus {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.3);
}

/* Keyboard focus - outer offset ring for accessibility */
.ui-button.secondary-error:focus-visible,
.ui-button--secondary-error:focus-visible {
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--red-500, #ef4444);
}

/* Text Error - Transparent background, red text */
.ui-button.text-error,
.ui-button--text-error {
    background-color: transparent;
    color: var(--red-500, #ef4444);
    border-color: transparent;
    box-shadow: none;
}

.ui-button.text-error:hover,
.ui-button--text-error:hover {
    color: var(--red-600, #dc2626);
    background-color: rgba(239, 68, 68, 0.08);
}

.ui-button.text-error:active,
.ui-button--text-error:active {
    color: var(--red-800, #991b1b);
}

/* Focus ring */
.ui-button.text-error:focus,
.ui-button--text-error:focus {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.3);
}

/* Keyboard focus - outer offset ring for accessibility */
.ui-button.text-error:focus-visible,
.ui-button--text-error:focus-visible {
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--red-500, #ef4444);
}

/* ===== Sizes ===== */

.ui-button.xs,
.ui-button--xs {
    padding: 4px 8px;
    font-size: 12px;
}

.ui-button.sm,
.ui-button--sm {
    padding: 6px 14px;
    font-size: 14px;
}

.ui-button.md,
.ui-button--md {
    padding: 8px 16px;
    font-size: 16px;
}

.ui-button.lg,
.ui-button--lg {
    padding: 10px 20px;
    font-size: 16px;
}

.ui-button.icon,
.ui-button--icon {
    width: 36px;
    height: 36px;
    padding: 0;
}

.ui-button.icon-sm,
.ui-button--icon-sm {
    width: 28px;
    height: 28px;
    padding: 0;
}

.ui-button.icon-lg,
.ui-button--icon-lg {
    width: 44px;
    height: 44px;
    padding: 0;
}

/* ===== Additional Modifiers ===== */

/* Full width button */
.ui-button.full-width,
.ui-button--full-width {
    width: 100%;
}

/* No border on focus (utility class from ui-core) */
.ui-button.no-border-focus,
.ui-button--no-border-focus {
    border: none !important;
    box-shadow: none !important;
}

/* Loading state */
.ui-button.loading,
.ui-button--loading {
    pointer-events: none;
    opacity: 0.7;
}

.ui-button.loading::after,
.ui-button--loading::after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ui-button-spin 0.6s linear infinite;
    margin-left: 8px;
}

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

/* ===== Ripple Effect ===== */
.ui-button .ui-button-ripple {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.3; /* Initial opacity - set here, not inline, so transitions work */
    pointer-events: none;
    /* Two-phase animation matching ui-core useRipple:
       Phase 1: Scale up while fading from 0.3 to 0.1 (600ms)
       Phase 2: Fade to 0 (triggered on mouseup) */
    transition: transform 600ms cubic-bezier(.42,.36,.28,.88), opacity 600ms ease-out;
}

.ui-button .ui-button-ripple.ripple-active {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0.1; /* Fades from 0.3 to 0.1 during scale animation */
}

.ui-button .ui-button-ripple.ripple-fading {
    opacity: 0 !important; /* Fades from 0.1 to 0 on mouseup */
    transition: opacity 390ms ease-in-out 78ms;
}

/* ===== Button with Icon ===== */
.ui-button svg,
.ui-button img {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

/* Icon only buttons - center the icon */
.ui-button.icon svg,
.ui-button--icon svg,
.ui-button.icon-sm svg,
.ui-button--icon-sm svg,
.ui-button.icon-lg svg,
.ui-button--icon-lg svg {
    width: 20px;
    height: 20px;
}

/* ===== Button Group Support ===== */
.ui-button-group {
    display: inline-flex;
}

.ui-button-group .ui-button {
    border-radius: 0;
}

.ui-button-group .ui-button:first-child {
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px;
}

.ui-button-group .ui-button:last-child {
    border-top-right-radius: 9999px;
    border-bottom-right-radius: 9999px;
}

.ui-button-group .ui-button:not(:last-child) {
    border-right-width: 0;
}