.btn,
.btn-secondary,
.btn-danger,
button:not([class]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    border: none;
    border-radius: var(--rounded-lg);
    cursor: pointer;
    transition: all var(--transition-normal);
    user-select: none;
    text-decoration: none;

    &:focus {
        outline: none;
    }

    &:active:not(:disabled) {
        transform: scale(var(--scale-98));
    }

    &:disabled {
        opacity: var(--opacity-60);
        cursor: not-allowed;
    }
}

.btn,
button:not([class]) {
    background: var(--gradient-primary);
    background-size: 125% 125%;
    background-position: 0% 0%;
    color: var(--white);

    &:hover:not(:disabled) {
        background-position: 100% 100%;
        box-shadow: var(--shadow-md);
    }
}

.btn-secondary {
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color-strong);

    &:hover:not(:disabled) {
        background: var(--surface-hover);
        box-shadow: var(--shadow-md);
    }
}

.btn-danger {
    background: var(--red-600);
    color: var(--white);

    &:hover:not(:disabled) {
        background: var(--red-700);
        box-shadow: var(--shadow-md);
    }
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-10);
    height: var(--spacing-10);
    padding: 0;
    border: none;
    border-radius: var(--rounded-full);
    font-size: var(--text-lg);
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);

    &:hover {
        background: var(--surface);
        color: var(--text-primary);
        transform: scale(var(--scale-105));
        box-shadow: var(--shadow-md);
    }

    &.active {
        background: var(--gradient-primary);
        color: var(--white);
    }
}

.btn-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-1);
    min-width: var(--spacing-22);
    width: auto;
    height: auto;
    padding: var(--spacing-3) var(--spacing-4);
    background: transparent;
    border: 2px solid transparent;
    border-radius: var(--rounded-lg);
    box-shadow: none;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);

    i {
        font-size: var(--text-xl);
        color: var(--text-muted);
    }

    span {
        display: block;
        font-size: var(--text-xs);
        font-weight: var(--font-medium);
        color: var(--text-muted);
        white-space: nowrap;
    }

    &:hover {
        background: var(--surface-alt);
        transform: none;
        box-shadow: none;
    }

    &.active {
        background: rgba(var(--primary-rgb), var(--opacity-10));
        border-color: var(--primary);

        i,
        span {
            color: var(--primary);
        }

        span {
            font-weight: var(--font-semibold);
        }
    }
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-10);
    height: var(--spacing-10);
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--rounded-lg);
    color: var(--text-muted);
    box-shadow: none;
    cursor: pointer;
    transition: color var(--transition-fast);

    &:hover:not(:disabled) {
        color: var(--text-secondary);
    }
}

.btn-full {
    width: 100%;
}

.btn-sm {
    font-size: var(--text-xs);
    padding: var(--spacing-1) var(--spacing-3);
}

@media (max-width: 639px) {
    .btn-action {
        width: var(--spacing-12);
        height: var(--spacing-12);
        min-width: var(--spacing-12);
        padding: var(--spacing-2);

        i {
            font-size: var(--text-lg);
        }

        span {
            display: none;
        }
    }
}

@media (min-width: 1080px) {
    .btn-action {
        min-width: var(--spacing-25);
    }
}