/**
 * Opacity and Special CSS Classes
 * These use attribute selectors to avoid escaping issues
 * @package GTRIN
 * @since 1.0.0
 */

/* Height with arbitrary values */
[class*="h-[400px]"] {
    height: 400px;
}

[class*="h-[500px]"] {
    height: 500px;
}

[class*="h-[85vh]"] {
    height: 85vh;
}

/* Width/Height filters and effects */
[class*="grayscale-[0.2]"] {
    filter: grayscale(0.2);
}

[class*="contrast-[1.1]"] {
    filter: contrast(1.1);
}

/* Aspect ratio with arbitrary values */
[class*="aspect-[4/3]"] {
    aspect-ratio: 4 / 3;
}

[class*="aspect-[3/4]"] {
    aspect-ratio: 3 / 4;
}

/* Line height with arbitrary values */
[class*="leading-[1.1]"] {
    line-height: 1.1;
}

/* Letter spacing with arbitrary values */
[class*="tracking-[0.2em]"] {
    letter-spacing: 0.2em;
}

/* Padding with decimals */
[class*="py-1.5"] {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

[class*="py-2.5"] {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

/* Text size with arbitrary values */
[class*="text-[10px]"] {
    font-size: 10px;
    line-height: 1.5;
}

/* Text colors with opacity */
[class*="text-white/80"] {
    color: rgba(255, 255, 255, 0.8);
}

[class*="text-white/90"] {
    color: rgba(255, 255, 255, 0.9);
}

[class*="text-slate-100/90"] {
    color: rgba(241, 245, 249, 0.9);
}

[class*="hover:text-primary/70"]:hover {
    color: rgba(25, 120, 229, 0.7);
}

/* Background with opacity - Primary */
[class*="bg-primary/90"] {
    background-color: rgba(25, 120, 229, 0.9);
}

[class*="bg-primary/40"] {
    background-color: rgba(25, 120, 229, 0.4);
}

[class*="bg-primary/20"] {
    background-color: rgba(25, 120, 229, 0.2);
}

[class*="bg-primary/10"] {
    background-color: rgba(25, 120, 229, 0.1);
}

/* Background with opacity - White */
[class*="bg-white/90"] {
    background-color: rgba(255, 255, 255, 0.9);
}

[class*="bg-white/80"] {
    background-color: rgba(255, 255, 255, 0.8);
}

[class*="bg-white/20"] {
    background-color: rgba(255, 255, 255, 0.2);
}

[class*="bg-white/10"] {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Background with opacity - Black */
[class*="bg-black/80"] {
    background-color: rgba(0, 0, 0, 0.8);
}

[class*="bg-black/60"] {
    background-color: rgba(0, 0, 0, 0.6);
}

[class*="bg-black/50"] {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Background with opacity - Slate */
[class*="bg-slate-900/80"] {
    background-color: rgba(15, 23, 42, 0.8);
}

[class*="bg-slate-900/50"] {
    background-color: rgba(15, 23, 42, 0.5);
}

[class*="bg-slate-800/90"] {
    background-color: rgba(30, 41, 59, 0.9);
}

/* Background with opacity - Background colors */
[class*="bg-background-light/90"] {
    background-color: rgba(248, 246, 246, 0.9);
}

[class*="bg-background-light/80"] {
    background-color: rgba(248, 246, 246, 0.8);
}

[class*="bg-background-dark/90"] {
    background-color: rgba(34, 22, 16, 0.9);
}

[class*="bg-background-dark/80"] {
    background-color: rgba(34, 22, 16, 0.8);
}

[class*="bg-background-dark/40"] {
    background-color: rgba(34, 22, 16, 0.4);
}

/* Background with opacity - Green */
[class*="bg-green-500/10"] {
    background-color: rgba(34, 197, 94, 0.1);
}

[class*="bg-green-500/20"] {
    background-color: rgba(34, 197, 94, 0.2);
}

/* Gradients - From colors */
[class*="from-black/80"] {
    --tw-gradient-from: rgba(0, 0, 0, 0.8);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0));
}

[class*="from-black/60"] {
    --tw-gradient-from: rgba(0, 0, 0, 0.6);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0));
}

[class*="from-slate-900/80"] {
    --tw-gradient-from: rgba(15, 23, 42, 0.8);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(15, 23, 42, 0));
}

[class*="from-background-dark/90"] {
    --tw-gradient-from: rgba(34, 22, 16, 0.9);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(34, 22, 16, 0));
}

[class*="from-background-dark/40"] {
    --tw-gradient-from: rgba(34, 22, 16, 0.4);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(34, 22, 16, 0));
}

[class*="to-primary/40"] {
    --tw-gradient-to: rgba(25, 120, 229, 0.4);
}

[class*="via-background-dark/40"] {
    --tw-gradient-stops: var(--tw-gradient-from), rgba(34, 22, 16, 0.4), var(--tw-gradient-to, rgba(34, 22, 16, 0));
}

/* Border with opacity */
[class*="border-primary/50"] {
    border-color: rgba(25, 120, 229, 0.5);
}

[class*="border-primary/30"] {
    border-color: rgba(25, 120, 229, 0.3);
}

[class*="border-white/20"] {
    border-color: rgba(255, 255, 255, 0.2);
}

[class*="hover:border-primary/50"]:hover {
    border-color: rgba(25, 120, 229, 0.5);
}

/* Shadow with primary color opacity */
[class*="shadow-primary/20"] {
    box-shadow: 0 10px 15px -3px rgba(25, 120, 229, 0.2), 0 4px 6px -2px rgba(25, 120, 229, 0.1);
}

[class*="shadow-primary/30"] {
    box-shadow: 0 10px 15px -3px rgba(25, 120, 229, 0.3), 0 4px 6px -2px rgba(25, 120, 229, 0.15);
}

[class*="shadow-primary/40"] {
    box-shadow: 0 10px 15px -3px rgba(25, 120, 229, 0.4), 0 4px 6px -2px rgba(25, 120, 229, 0.2);
}

[class*="shadow-primary/5"] {
    box-shadow: 0 25px 50px -12px rgba(25, 120, 229, 0.05);
}

[class*="hover:shadow-primary/20"]:hover {
    box-shadow: 0 10px 15px -3px rgba(25, 120, 229, 0.2), 0 4px 6px -2px rgba(25, 120, 229, 0.1);
}

[class*="shadow-amber-500/30"] {
    box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.3), 0 4px 6px -2px rgba(245, 158, 11, 0.15);
}

/* Hover background with opacity */
[class*="hover:bg-primary/90"]:hover {
    background-color: rgba(25, 120, 229, 0.9);
}

[class*="hover:bg-white/20"]:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Dark mode specific */
.dark [class*="dark:bg-background-dark/80"] {
    background-color: rgba(34, 22, 16, 0.8);
}

.dark [class*="dark:bg-background-dark/90"] {
    background-color: rgba(34, 22, 16, 0.9);
}

.dark [class*="dark:bg-slate-800/90"] {
    background-color: rgba(30, 41, 59, 0.9);
}

.dark [class*="dark:bg-slate-900/50"] {
    background-color: rgba(15, 23, 42, 0.5);
}
