.btn {
    height: 40px;
    padding: 0 var(--spacing-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    border: none;
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary {
    background: var(--color-black) !important;
    color: var(--color-white) !important;
    border: 1px solid var(--color-black) !important;
}

.btn-outline {
    background: var(--color-white) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
}

.btn-danger {
    background: var(--color-danger) !important;
    color: var(--color-white) !important;
    border: 1px solid var(--color-danger) !important;
}

.btn-warning {
    background: var(--color-warning) !important;
    color: var(--color-white) !important;
    border: 1px solid var(--color-warning) !important;
}

.btn-primary:hover,
.btn-outline:hover,
.btn-danger:hover,
.btn-warning:hover {
    opacity: 0.9;
}

.btn-loading {
    position: relative;
    color: transparent !important;
    text-shadow: none !important;
    pointer-events: none;
    transition: none !important;
}

.btn-loading > * {
    visibility: hidden !important;
    opacity: 0 !important;
}

.btn-loading::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    top: calc(50% - 9px);
    left: calc(50% - 9px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    border-top-color: var(--color-white);
    animation: btn-spinner 0.6s linear infinite;
}

.btn-outline.btn-loading::after {
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--color-text);
}

@keyframes btn-spinner {
    to {
        transform: rotate(360deg);
    }
}