/* ==========================================================================
   Multi Buttons (ke-multi-buttons) — v0.18.0
   ========================================================================== */

/* Wrapper */
.ke-multi-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ke-space-3);
    align-items: center;
}

/* Layout-Varianten */
.ke-multi-buttons--layout-horizontal {
    flex-direction: row;
}

.ke-multi-buttons--layout-vertical {
    flex-direction: column;
    align-items: flex-start;
}

.ke-multi-buttons--layout-grid {
    display: grid;
}

.ke-multi-buttons--grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ke-multi-buttons--grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ke-multi-buttons--grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Stretch: Buttons nehmen gleichmäßig Platz ein */
.ke-multi-buttons--align-stretch.ke-multi-buttons--layout-horizontal .ke-multi-button,
.ke-multi-buttons--layout-grid .ke-multi-button {
    flex: 1 1 0;
    text-align: center;
    justify-content: center;
}

/* Button-Basis */
.ke-multi-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ke-space-2);
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--ke-radius-md);
    cursor: pointer;
    transition: background-color var(--ke-transition),
                color var(--ke-transition),
                border-color var(--ke-transition),
                box-shadow var(--ke-transition),
                transform var(--ke-transition-fast);
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
}

.ke-multi-button:hover {
    text-decoration: none;
}

.ke-multi-button:active {
    transform: translateY(1px);
}

/* Größen */
.ke-multi-buttons--size-small .ke-multi-button {
    padding: var(--ke-space-2) var(--ke-space-4);
    font-size: 13px;
}

.ke-multi-buttons--size-medium .ke-multi-button {
    padding: var(--ke-space-3) var(--ke-space-6);
    font-size: 15px;
}

.ke-multi-buttons--size-large .ke-multi-button {
    padding: var(--ke-space-4) var(--ke-space-8);
    font-size: 17px;
}

/* Variante: Primary */
.ke-multi-button--primary {
    background-color: var(--ke-primary);
    color: #ffffff;
    border-color: var(--ke-primary);
}

.ke-multi-button--primary:hover {
    background-color: var(--ke-primary-dark);
    border-color: var(--ke-primary-dark);
    color: #ffffff;
}

/* Variante: Secondary */
.ke-multi-button--secondary {
    background-color: var(--ke-secondary);
    color: #ffffff;
    border-color: var(--ke-secondary);
}

.ke-multi-button--secondary:hover {
    background-color: var(--ke-primary-dark);
    border-color: var(--ke-primary-dark);
    color: #ffffff;
}

/* Variante: Outline */
.ke-multi-button--outline {
    background-color: transparent;
    color: var(--ke-primary);
    border-color: var(--ke-primary);
}

.ke-multi-button--outline:hover {
    background-color: var(--ke-primary);
    color: #ffffff;
    border-color: var(--ke-primary);
}

/* Variante: Ghost */
.ke-multi-button--ghost {
    background-color: transparent;
    color: var(--ke-text);
    border-color: transparent;
}

.ke-multi-button--ghost:hover {
    background-color: rgba(var(--ke-black-rgb), 0.06);
    color: var(--ke-primary);
    border-color: transparent;
}

/* Icon */
.ke-multi-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1em;
    line-height: 1;
}

.ke-multi-button__icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* Icon-Position: left → Icon kommt vor Text (flex-Reihenfolge default),
   right → icon wird nach Text gerendert, kein extra CSS nötig */

/* Responsive */
@media (max-width: 767px) {
    .ke-multi-buttons--stack-mobile {
        flex-direction: column;
        align-items: flex-start;
    }

    .ke-multi-buttons--stack-mobile.ke-multi-buttons--layout-grid {
        grid-template-columns: 1fr;
    }

    .ke-multi-buttons--full-width-mobile .ke-multi-button {
        width: 100%;
        justify-content: center;
    }

    .ke-multi-buttons--stack-mobile.ke-multi-buttons--full-width-mobile {
        width: 100%;
    }
}