/**
 * MX Watchlist Button — v2.0
 *
 * Pulls colors from --mx-* design tokens (set in your template) with sane
 * fallbacks so the button renders correctly on any page, even one that
 * doesn't include the parent design system.
 *
 * State is driven entirely by data attributes on the button:
 *   data-state="inactive" | "active" | "loading" | "error"
 *   data-size="sm" | "md"
 *   data-variant="default" | "minimal"
 *
 * The JS only flips these attributes; CSS handles all visual changes.
 */

.mx-watchlist-btn {
    /* Reset native button styles */
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid var(--mx-line, #e5e7eb);
    background: var(--mx-surface, #ffffff);
    color: var(--mx-ink-2, #2d3338);

    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    height: 30px;
    border-radius: 7px;

    /* Typography */
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;

    /* Behavior */
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}

/* ============ Icon ============ */

.mx-watchlist-btn__icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    transition: transform .2s ease, fill .15s ease;
}

.mx-watchlist-btn__label {
    /* Keeps the label as a separate node so we can hide it for icon-only variants */
    display: inline-block;
}

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

.mx-watchlist-btn[data-size="sm"] {
    height: 26px;
    padding: 0 10px;
    font-size: 11.5px;
    gap: 5px;
}

.mx-watchlist-btn[data-size="sm"] .mx-watchlist-btn__icon {
    width: 12px;
    height: 12px;
}

/* ============ Hover / focus ============ */

.mx-watchlist-btn:hover {
    background: var(--mx-orange-wash, #fffbeb);
    border-color: var(--mx-orange-soft, #fef3c7);
    color: var(--mx-orange-deep, #d97706);
}

.mx-watchlist-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .25);
    border-color: var(--mx-orange, #f59e0b);
}

.mx-watchlist-btn:active {
    transform: scale(.97);
}

/* ============ Active state — stock is in watchlist ============ */

.mx-watchlist-btn[data-state="active"] {
    background: var(--mx-orange-wash, #fffbeb);
    border-color: var(--mx-orange-soft, #fef3c7);
    color: var(--mx-orange-deep, #d97706);
}

.mx-watchlist-btn[data-state="active"]:hover {
    background: var(--mx-orange-soft, #fef3c7);
    border-color: var(--mx-orange, #f59e0b);
}

/* When active, the star icon is filled with the same color as the text */
.mx-watchlist-btn[data-state="active"] .mx-watchlist-btn__icon {
    fill: currentColor;
}

/* Subtle pop animation when transitioning to active state */
.mx-watchlist-btn[data-state="active"][data-just-added="true"] .mx-watchlist-btn__icon {
    animation: mx-wl-pop .35s ease;
}

@keyframes mx-wl-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ============ Loading state ============ */

.mx-watchlist-btn[data-state="loading"] {
    cursor: wait;
    opacity: .75;
    pointer-events: none;
}

.mx-watchlist-btn[data-state="loading"] .mx-watchlist-btn__icon {
    animation: mx-wl-spin 1s linear infinite;
    opacity: .6;
}

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

/* ============ Error state — briefly flashed on AJAX failure ============ */

.mx-watchlist-btn[data-state="error"] {
    background: var(--mx-down-soft, #fef2f2);
    border-color: var(--mx-down-border, #fecaca);
    color: var(--mx-down, #b91c1c);
}

/* ============ Minimal (icon-only) variant ============ */

.mx-watchlist-btn[data-variant="minimal"] {
    padding: 0;
    width: 30px;
    gap: 0;
}

.mx-watchlist-btn[data-variant="minimal"][data-size="sm"] {
    width: 26px;
}

.mx-watchlist-btn[data-variant="minimal"] .mx-watchlist-btn__label {
    /* Visually hidden but accessible to screen readers */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============ Guest (logged-out) state — links to sign-in ============ */

.mx-watchlist-btn--guest {
    color: var(--mx-ink-3, #5a6470);
}

.mx-watchlist-btn--guest:hover {
    background: var(--mx-orange-wash, #fffbeb);
    color: var(--mx-orange-deep, #d97706);
    text-decoration: none;
}

/* ============ Disabled (e.g. during AJAX) ============ */

.mx-watchlist-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
}

/* ============ Responsive — collapse label on narrow screens ============ */

@media (max-width: 600px) {
    .mx-watchlist-btn:not([data-variant="minimal"]) {
        padding: 0 10px;
    }
}