/**
 * Test Template Utility Classes
 * High-usage classes for test/demo templates
 */

/* Typography Classes */
.sparkles-heading-2xl,
.sparkles-heading-xl,
.sparkles-heading-lg,
.sparkles-heading-base {
    font-size: var(--sparkles-heading-size);
    font-weight: var(--sparkles-heading-weight);
    line-height: var(--sparkles-heading-line-height);
    color: var(--color-secondary);
}

.sparkles-heading-2xl,
.sparkles-heading-xl {
    --sparkles-heading-weight: 700;
    --sparkles-heading-line-height: 1.25;
}

.sparkles-heading-lg,
.sparkles-heading-base {
    --sparkles-heading-weight: 600;
}

.sparkles-heading-2xl {
    --sparkles-heading-size: 2.25rem;
}

.sparkles-heading-xl {
    --sparkles-heading-size: 1.875rem;
}

.sparkles-heading-lg {
    --sparkles-heading-size: 1.5rem;
    --sparkles-heading-line-height: 1.375;
}

.sparkles-heading-base {
    --sparkles-heading-size: 1.25rem;
    --sparkles-heading-line-height: 1.5;
}

.sparkles-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
}

/* Badge Components */
.sparkles-badge,
.sparkles-badge-success,
.sparkles-badge-warning {
    display: inline-flex;
    align-items: center;
    padding: var(--sparkles-badge-padding, 0.25rem 0.75rem);
    border-radius: 9999px;
    font-size: var(--sparkles-badge-size, 0.875rem);
    font-weight: 500;
}

/* NOTE: .sparkles-status-success, .sparkles-status-error, .sparkles-status-warning,
 * .sparkles-status-neutral are defined in sparkles-status.css */

.sparkles-badge {
    background-color: var(--gray-100);
    color: var(--gray-800);
}

.sparkles-badge-success {
    background-color: var(--color-success-lighter);
    color: var(--color-success-darkest);
}

.sparkles-badge-warning {
    background-color: var(--color-warning-light);
    color: var(--color-primary);
}

/* Carousel */
.sparkles-carousel-slide {
    flex-shrink: 0;
    width: 100%;
    transition: transform 300ms;
}

/* Toggle Slider */
.sparkles-toggle-slider {
    position: absolute;
    inset: 0;
    background-color: var(--gray-300);
    border-radius: 9999px;
    transition: all 200ms;
}

.sparkles-toggle-slider::before {
    content: '';
    position: absolute;
    left: 0.25rem;
    top: 0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: white;
    border-radius: 9999px;
    transition: transform 200ms;
}

input:checked + .sparkles-toggle-slider {
    background-color: var(--color-primary);
}

input:checked + .sparkles-toggle-slider::before {
    transform: translateX(1.25rem);
}

/* Buttons */
.sparkles-btn-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    background-color: white;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 200ms;
}

.sparkles-btn-white:hover {
    background-color: var(--color-primary);
    color: white;
}

/* Social Icons */
.sparkles-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: var(--color-primary);
    color: white;
    transition: background-color 200ms;
}

.sparkles-social-icon:hover {
    background-color: var(--color-primary-dark);
}