@casoon/dragonfly/effects/interaction/disabled.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Disabled Effects
 * 
 * This file contains various disabled state effects for modern UIs.
 * The effects are optimized for performance and consider reduced motion.
 */

@layer components {
    .disabled {
        cursor: not-allowed;
        opacity: var(--opacity-50);
        pointer-events: none;
        user-select: none;
    }

    .disabled-sm {
        opacity: var(--opacity-70);
    }

    .disabled-lg {
        opacity: var(--opacity-30);
    }

    .disabled-blur {
        cursor: not-allowed;
        filter: blur(var(--border-width));
        pointer-events: none;
        user-select: none;
    }

    .disabled-blur-sm {
        filter: blur(0.5 var(--spacing-1));
    }

    .disabled-blur-lg {
        filter: blur(var(--border-width-thick));
    }

    .disabled-grayscale {
        cursor: not-allowed;
        filter: var(--filter-grayscale-100);
        pointer-events: none;
        user-select: none;
    }

    .disabled-grayscale-sm {
        filter: var(--filter-grayscale-50);
    }

    .disabled-grayscale-lg {
        filter: var(--filter-grayscale-100) brightness(0.8);
    }

    .disabled-border {
        border-style: dashed;
        cursor: not-allowed;
        pointer-events: none;
        user-select: none;
    }

    .disabled-border-sm {
        border-width: var(--border-width);
    }

    .disabled-border-lg {
        border-width: var(--spacing-1);
    }

    .disabled-bg {
        background-color: var(--disabled-bg, rgb(0 0 0 / 5%));
        cursor: not-allowed;
        pointer-events: none;
        user-select: none;
    }

    .disabled-bg-sm {
        background-color: var(--disabled-bg-sm, rgb(0 0 0 / 2%));
    }

    .disabled-bg-lg {
        background-color: var(--disabled-bg-lg, rgb(0 0 0 / 10%));
    }

    .disabled-text {
        color: var(--disabled-text, rgb(0 0 0 / 50%));
        cursor: not-allowed;
        pointer-events: none;
        user-select: none;
    }

    .disabled-text-sm {
        color: var(--disabled-text-sm, rgb(0 0 0 / 70%));
    }

    .disabled-text-lg {
        color: var(--disabled-text-lg, rgb(0 0 0 / 30%));
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    @layer components {
        .disabled,
        .disabled-blur,
        .disabled-grayscale,
        .disabled-border,
        .disabled-bg,
        .disabled-text {
            transition: var(--transition-none);
        }
    }
}