/**
 * Button Component - CSS
 * 
 * Ported from ui-core
 * Source: src/components/Atoms/Button/Button.tsx
 * Design tokens: src/index.css
 * 
 * Tailwind classes have been converted to vanilla CSS.
 * See README.md in this directory for sync instructions.
 *
 * Last synced: 2026-04-08 (ui-core v2.0.76; Button.tsx / Button.stories.tsx)
 */

@import url("../tokens.4b8ea74adec1.css");

/* ===== Base Button Styles ===== */
.ui-button {
    /* Tailwind default `shadow` combined with focus rings in Button.tsx */
    --ui-button-focus-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px; /* rounded-full (pill shape) */
    padding: var(--cs8, 8px) var(--cs16, 16px); /* md: py-cs8 px-cs16 */
    font-weight: 400; /* Button.tsx tv base has no font-medium */
    font-size: inherit;
    line-height: inherit;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    border: none;
    outline: none;
    position: relative;
    overflow: hidden;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    -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(--color-green, #00c57b);
    color: var(--uicore-primary-foreground);
    border-color: transparent;
}

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

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

.ui-button.primary:focus,
.ui-button--primary:focus,
.ui-button.primary:focus-visible,
.ui-button--primary:focus-visible {
    /* focus:ring-4 focus:ring-green/30 focus:shadow — ring before shadow (Tailwind box-shadow order) */
    box-shadow: 0 0 0 4px rgba(0, 197, 123, 0.3), var(--ui-button-focus-shadow);
}

.ui-button.primary:disabled,
.ui-button--primary:disabled {
    background-color: var(--color-gray-300, #e1e5e5);
    color: var(--color-gray-500, #949899);
    cursor: not-allowed;
}

/* Gradient - Dark green to olive gradient background, white text */
.ui-button.gradient,
.ui-button--gradient {
    background: linear-gradient(94deg, var(--color-green-700, #009960) 3.06%, #A1A532 86.7%);
    color: var(--uicore-primary-foreground);
    border-color: transparent;
    border-radius: 1000px;
}

.ui-button.gradient:hover,
.ui-button--gradient:hover {
    background: linear-gradient(94deg, var(--color-green-800, #007448) 3.06%, #8a8e2b 86.7%);
}

.ui-button.gradient:active,
.ui-button--gradient:active {
    background: linear-gradient(94deg, var(--color-green-900, #005233) 3.06%, #747824 86.7%);
}

.ui-button.gradient:focus,
.ui-button--gradient:focus,
.ui-button.gradient:focus-visible,
.ui-button--gradient:focus-visible {
    box-shadow: 0 0 0 4px rgba(0, 197, 123, 0.3), var(--ui-button-focus-shadow);
}

.ui-button.gradient:disabled,
.ui-button--gradient:disabled {
    background: var(--color-gray-300, #e1e5e5);
    color: var(--color-gray-500, #949899);
    cursor: not-allowed;
}

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

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

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

.ui-button.secondary:focus,
.ui-button--secondary:focus,
.ui-button.secondary:focus-visible,
.ui-button--secondary:focus-visible {
    /* focus:ring-2 focus:shadow — Tailwind ring-2 with no ring-* color uses currentColor (text green) */
    box-shadow: 0 0 0 2px currentColor, var(--ui-button-focus-shadow);
}

.ui-button.secondary:disabled,
.ui-button--secondary:disabled {
    background-color: var(--color-gray-300, #e1e5e5);
    color: var(--color-gray-500, #949899);
    border: 1px solid var(--color-gray-300, #e1e5e5);
    cursor: not-allowed;
}

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

.ui-button.ghost:hover,
.ui-button--ghost:hover {
    color: var(--color-green-700, #009960);
}

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

.ui-button.ghost:focus,
.ui-button--ghost:focus,
.ui-button.ghost:focus-visible,
.ui-button--ghost:focus-visible {
    border-color: var(--color-green, #00c57b);
    box-shadow: var(--ui-button-focus-shadow);
}

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

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

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

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

.ui-button.primary-error:focus,
.ui-button--primary-error:focus,
.ui-button.primary-error:focus-visible,
.ui-button--primary-error:focus-visible {
    box-shadow: 0 0 0 4px rgba(255, 31, 31, 0.3), var(--ui-button-focus-shadow);
}

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

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

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

.ui-button.secondary-error:focus,
.ui-button--secondary-error:focus,
.ui-button.secondary-error:focus-visible,
.ui-button--secondary-error:focus-visible {
    /* focus:border-4 focus:shadow (not ring-4 like primary error) */
    border-width: 4px;
    border-color: var(--color-red-500, #ff1f1f);
    box-shadow: var(--ui-button-focus-shadow);
}

/* Text Error - White background, red text, 4px transparent border */
.ui-button.text-error,
.ui-button--text-error {
    background-color: var(--uicore-card);
    color: var(--color-red-500, #ff1f1f);
    border: 4px solid transparent;
    box-shadow: none;
}

.ui-button.text-error:hover,
.ui-button--text-error:hover {
    color: var(--color-red-600, #f60000);
}

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

.ui-button.text-error:focus,
.ui-button--text-error:focus,
.ui-button.text-error:focus-visible,
.ui-button--text-error:focus-visible {
    border-color: var(--color-red-500, #ff1f1f);
    box-shadow: var(--ui-button-focus-shadow);
}

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

.ui-button.xs,
.ui-button--xs {
    padding: var(--cs6, 6px) var(--cs4, 4px);
}

.ui-button.sm,
.ui-button--sm {
    padding: var(--cs16, 16px) var(--cs14, 14px);
}

.ui-button.md,
.ui-button--md {
    padding: var(--cs8, 8px) var(--cs16, 16px);
}

.ui-button.lg,
.ui-button--lg {
    padding: var(--cs10, 10px) var(--cs20, 20px);
}

.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 ===== */

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

.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;
    pointer-events: none;
    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;
}

.ui-button .ui-button-ripple.ripple-fading {
    opacity: 0 !important;
    transition: opacity 390ms ease-in-out 78ms;
}

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

.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;
}