.maf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--maf-radius-sm);
    font-family: var(--maf-font-body);
    font-weight: var(--maf-font-weight-medium);
    cursor: pointer;
    transition:
        background-color var(--maf-duration-normal) var(--maf-easing-standard),
        box-shadow var(--maf-duration-normal) var(--maf-easing-standard),
        opacity var(--maf-duration-fast) var(--maf-easing-standard);
    user-select: none;
    white-space: nowrap;
    line-height: 1;
}

.maf-button:focus-visible {
    outline: 2px solid var(--maf-color-info);
    outline-offset: 2px;
}

.maf-button[disabled] {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

/* Sizes */

.maf-button--sm {
    padding: var(--maf-space-1) var(--maf-space-3);
    font-size: var(--maf-font-size-sm);
    min-height: 32px;
}

.maf-button--md {
    padding: var(--maf-space-2) var(--maf-space-4);
    font-size: var(--maf-font-size-md);
    min-height: 40px;
}

.maf-button--lg {
    padding: var(--maf-space-3) var(--maf-space-6);
    font-size: var(--maf-font-size-lg);
    min-height: 48px;
}

/* Variants */

.maf-button--primary {
    background-color: var(--maf-color-primary);
    color: var(--maf-white);
}

.maf-button--primary:hover {
    box-shadow:
        0 3px 6px 0 rgba(0, 0, 0, 0.12),
        0 2px 4px 0 rgba(0, 0, 0, 0.14);
}

.maf-button--primary:active {
    box-shadow: none;
}

.maf-button--secondary {
    background-color: var(--maf-color-accent);
    color: var(--maf-white);
}

.maf-button--secondary:hover {
    box-shadow:
        0 3px 6px 0 rgba(0, 0, 0, 0.12),
        0 2px 4px 0 rgba(0, 0, 0, 0.14);
}

.maf-button--outline {
    background-color: transparent;
    color: var(--maf-color-primary);
    border: 1px solid var(--maf-color-primary);
}

.maf-button--outline:hover {
    background-color: rgba(26, 77, 153, 0.08);
}

.maf-button--text {
    background-color: transparent;
    color: var(--maf-color-primary);
}

.maf-button--text:hover {
    background-color: rgba(26, 77, 153, 0.08);
}

/* Ripple-achtig hover effect */

.maf-button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: currentColor;
    opacity: 0;
    transition: opacity var(--maf-duration-fast) var(--maf-easing-standard);
}

.maf-button {
    position: relative;
    overflow: hidden;
}

.maf-button:hover::after {
    opacity: 0.08;
}

.maf-button:active::after {
    opacity: 0.16;
}