/* Component: Button
 * Description: Provides styles for button components in three sizes (large, medium, small), 
 *              including default, outlined, and ghost variants. Handles interactive states 
 *              such as hover, active, and loading, with visual feedback like shadows, scaling, 
 *              and a spinner animation for loading state. Supports both button and anchor elements, 
 *              and uses CSS variables for branding colors.
 */


/* Default button styles */

.smd-component_button-large,
a.smd-component_button-large,
button.smd-component_button-large {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;

    background-color: var(--color-branding-primary);
    border: none;
    border-radius: 15px;
    color: white;
    padding: 14px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 17px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

.smd-component_button-medium,
a.smd-component_button-medium,
button.smd-component_button-medium {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;

    background-color: var(--color-branding-primary);
    border: none;
    border-radius: 15px;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

.smd-component_button-small,
a.smd-component_button-small,
button.smd-component_button-small {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;

    background-color: var(--color-branding-primary);
    border: none;
    border-radius: 12px;
    color: white;
    padding: 5px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

.smd-component_button-large:hover,
.smd-component_button-medium:hover,
.smd-component_button-small:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.smd-component_button-large:active,
.smd-component_button-medium:active,
.smd-component_button-small:active {
    filter: brightness(0.85);
    transform: scale(0.95);
    transition: transform 0.1s ease-in-out;
}



/* Outlined buttons */
.smd-component_button--outline {
    background: transparent !important;
    border: 2px solid var(--color-branding-primary) !important;
}

.smd-component_button--outline:hover {
    background: var(--color-branding-primary) !important;
    color: white !important;
}

.smd-component_button--outline.smd-component_button--loading::after {
    border-top-color: var(--color-branding-primary) !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
}

.smd-component_button--outline.smd-component_button--loading:hover::after {
    border-top-color: white !important;
}

.smd-component_button--outline.smd-component_button--loading:hover {
    background: transparent !important;
    /* Für Outline-Buttons */
    color: var(--color-branding-primary) !important;
}


/* Ghost buttons */
.smd-component_button--ghost:hover {
    background: color-mix(in srgb, var(--color-branding-primary) 15%, transparent 85%) !important;
    backdrop-filter: blur(8px) !important;
    color: var(--color-branding-bright) !important;
}

.smd-component_button--ghost.smd-component_button--loading::after {
    border-top-color: var(--color-branding-primary) !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
}

.smd-component_button--ghost.smd-component_button--loading:hover {
    background: transparent !important;
    color: var(--color-branding-primary) !important;
}



.smd-component_button--loading {
    position: relative;
    overflow: hidden;
    pointer-events: none;
    color: transparent !important; 
}

.smd-component_button--loading.interactive-loading .button-text {
    animation: slideOutDown 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
    display: block;
    width: 100%;
}

.smd-component_button--loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    box-sizing: border-box;
    will-change: transform;
    z-index: 2;
    animation: spin-centered 1.2s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}

.smd-component_button--loading.interactive-loading::after {
    animation: 
        spinnerFlyIn 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards,
        spin-centered 1.2s cubic-bezier(0.4, 0.0, 0.2, 1) 0.4s infinite;
}

/* Text slides down and fades out */
@keyframes slideOutDown {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* Text slides up and fades in (for reverse animation) */
@keyframes slideInUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Spinner flies in from top */
@keyframes spinnerFlyIn {
    0% {
        transform: translate(-50%, -150%) scale(0.3);
        opacity: 0;
    }
    70% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* Spinner flies out to top (for reverse animation) */
@keyframes spinnerFlyOut {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -150%) scale(0.3);
        opacity: 0;
    }
}

/* Spinning animation for the spinner */
@keyframes spin-centered {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.smd-component_button--loading-out.interactive-loading .button-text {
    animation: slideInUp 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.smd-component_button--loading-out.interactive-loading::after {
    animation: spinnerFlyOut 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.smd-component_button-large.smd-component_button--loading::after {
    width: 20px;
    height: 20px;
    border-width: 3px;
    border-top: 3px solid white;
}

.smd-component_button-medium.smd-component_button--loading::after {
    width: 18px;
    height: 18px;
    border-width: 2px;
    border-top: 2px solid white;
}

.smd-component_button-small.smd-component_button--loading::after {
    width: 16px;
    height: 16px;
    border-width: 2px;
    border-top: 2px solid white;
}

.smd-component_button--outline.smd-component_button--loading::after {
    border-top-color: var(--color-branding-primary);
}

.smd-component_button--ghost.smd-component_button--loading::after {
    border-top-color: var(--color-branding-primary);
}