/**
 * Icon Basis-Styles
 * 
 * Diese Datei enthält die grundlegenden Styles für alle Icons.
 * Die Styles sind in @layer icons organisiert.
 * 
 * Verwendete Icon-Sets und deren Lizenzen:
 * - Heroicons (MIT) - https://heroicons.com
 * - Feather Icons (MIT) - https://feathericons.com
 * - Phosphor Icons (MIT) - https://phosphoricons.com
 * - Remix Icons (MIT) - https://remixicon.com
 * - Bootstrap Icons (MIT) - https://icons.getbootstrap.com
 */


    /* Basis Icon Styles */
    .icon {
        display: var(--display-inline-block);
        fill: currentcolor;
        height: var(--icon-size-relative-md);
        stroke: currentcolor;
        stroke-width: 0%;
        vertical-align: var(--position-middle);
        width: var(--icon-size-relative-md);
    }

    /* Größenvarianten */
    .icon-xs {
        height: var(--icon-size-relative-xs);
        width: var(--icon-size-relative-xs);
    }

    .icon-sm {
        height: var(--icon-size-relative-sm);
        width: var(--icon-size-relative-sm);
    }

    .icon-lg {
        height: var(--icon-size-relative-lg);
        width: var(--icon-size-relative-lg);
    }

    .icon-xl {
        height: var(--icon-size-relative-xl);
        width: var(--icon-size-relative-xl);
    }

    .icon-2xl {
        height: var(--icon-size-relative-2xl);
        width: var(--icon-size-relative-2xl);
    }

    /* Ausrichtung */
    .icon-baseline {
        vertical-align: var(--position-baseline);
    }

    .icon-top {
        vertical-align: var(--position-top);
    }

    .icon-middle {
        vertical-align: var(--position-middle);
    }

    .icon-bottom {
        vertical-align: var(--position-bottom);
    }

    /* Animation */
    .icon-spin {
        animation: icon-spin var(--icon-animation-duration-slow) infinite var(--icon-animation-timing);
    }

    @keyframes icon-spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }