/**
 * Button Component
 *
 * Reusable button styles for actions and navigation.
 */

@layer admin-components {
    .admin-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--admin-spacing-sm);
        padding: var(--admin-spacing-sm) var(--admin-spacing-md);
        font-family: var(--admin-font-family-base);
        font-size: var(--admin-font-size-sm);
        font-weight: var(--admin-font-weight-medium);
        line-height: 1;
        text-decoration: none;
        border: 1px solid transparent;
        border-radius: var(--admin-radius-md);
        cursor: pointer;
        transition: all var(--admin-transition-base);
        white-space: nowrap;
    }

    .admin-btn:focus-visible {
        outline: 2px solid var(--admin-focus-ring);
        outline-offset: 2px;
    }

    /* Primary button */
    .admin-btn--primary {
        background-color: var(--admin-accent-primary);
        color: white;
    }

    .admin-btn--primary:hover {
        background-color: oklch(from var(--admin-accent-primary) calc(l * 0.9) c h);
    }

    /* Secondary button */
    .admin-btn--secondary {
        background-color: var(--admin-sidebar-bg);
        color: var(--admin-sidebar-text-hover);
    }

    .admin-btn--secondary:hover {
        background-color: oklch(from var(--admin-sidebar-bg) calc(l * 1.1) c h);
    }

    /* Accent button */
    .admin-btn--accent {
        background-color: var(--admin-accent-info);
        color: white;
    }

    .admin-btn--accent:hover {
        background-color: oklch(from var(--admin-accent-info) calc(l * 0.9) c h);
    }

    /* Success button */
    .admin-btn--success {
        background-color: var(--admin-accent-success);
        color: white;
    }

    .admin-btn--success:hover {
        background-color: oklch(from var(--admin-accent-success) calc(l * 0.9) c h);
    }

    /* Danger button */
    .admin-btn--danger {
        background-color: var(--admin-accent-error);
        color: white;
    }

    .admin-btn--danger:hover {
        background-color: oklch(from var(--admin-accent-error) calc(l * 0.9) c h);
    }

    /* Ghost button */
    .admin-btn--ghost {
        background-color: transparent;
        color: var(--admin-content-text);
        border-color: var(--admin-border-medium);
    }

    .admin-btn--ghost:hover {
        background-color: var(--admin-bg-secondary);
    }

    /* Size variants */
    .admin-btn--sm {
        padding: var(--admin-spacing-xs) var(--admin-spacing-sm);
        font-size: var(--admin-font-size-xs);
    }

    .admin-btn--lg {
        padding: var(--admin-spacing-md) var(--admin-spacing-lg);
        font-size: var(--admin-font-size-base);
    }

    /* Icon button */
    .admin-btn__icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }
}