/**
 * Outline-Effekte
 * 
 * Diese Datei enthält verschiedene Outline-Effekte für moderne UIs.
 * Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
 */

@layer utilities {
    .outline-none {
        outline: none;
    }

    .outline {
        outline: var(--border-width-thick) solid var(--outline-color, currentColor);
        outline-offset: var(--border-width-thick);
    }

    .outline-dashed {
        outline: var(--border-width-thick) dashed var(--outline-color, currentColor);
        outline-offset: var(--border-width-thick);
    }

    .outline-dotted {
        outline: var(--border-width-thick) dotted var(--outline-color, currentColor);
        outline-offset: var(--border-width-thick);
    }

    .outline-double {
        outline: var(--spacing-1) double var(--outline-color, currentColor);
        outline-offset: var(--border-width-thick);
    }

    .outline-thin {
        outline: var(--border-width) solid var(--outline-color, currentColor);
        outline-offset: var(--border-width);
    }

    .outline-thick {
        outline: var(--spacing-1) solid var(--outline-color, currentColor);
        outline-offset: var(--spacing-1);
    }

    .outline-offset-none {
        outline-offset: 0;
    }

    .outline-offset-sm {
        outline-offset: var(--border-width-thick);
    }

    .outline-offset-md {
        outline-offset: var(--spacing-1);
    }

    .outline-offset-lg {
        outline-offset: var(--spacing-2);
    }

    .outline-focus:focus {
        outline: var(--border-width-thick) solid var(--outline-focus-color, var(--color-primary));
        outline-offset: var(--border-width-thick);
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer utilities {
        .outline-focus:focus {
            transition: var(--transition-none);
        }
    }
}