/**
 * Material Design Icons CSS
 * 
 * Diese Datei enthält die CSS-Klassen für die Material Design Icons.
 * Die Styles sind in @layer components organisiert.
 */


    /* Base Icon */

    /* MDI als CSS Icon */
    .mdi,
    .mdi-icon {
        background-color: currentcolor;
        display: var(--display-inline-block);
        height: var(--spacing-6);
        mask-position: var(--position-center);
        mask-repeat: var(--bg-no-repeat);
        mask-size: var(--position-100);
        vertical-align: var(--position-middle);
        width: var(--spacing-6);
    }

    /* MDI Icons */
    .mdi-home {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
    }

    .mdi-menu {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E");
    }

    .mdi-close {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    }

    .mdi-search {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    }

    /* MDI Varianten */
    .mdi-outline {
        fill: none;
        stroke-width: 2%;
    }

    .mdi-filled {
        fill: currentcolor;
        stroke-width: 0%;
    }

    .mdi-round {
        fill: none;
        stroke-width: 1.5;
    }

    .mdi-sharp {
        fill: none;
        stroke-width: 2%;
    }

    /* Icon Sizes */
    .mdi-xs {
        height: var(--spacing-4);
        width: var(--spacing-4);
    }

    .mdi-sm {
        height: var(--spacing-5);
        width: var(--spacing-5);
    }

    .mdi-lg {
        height: var(--spacing-7);
        width: var(--spacing-7);
    }

    .mdi-xl {
        height: var(--spacing-8);
        width: var(--spacing-8);
    }

    .mdi-2xl {
        height: var(--spacing-10);
        width: var(--spacing-10);
    }

    /* Icon Alignment */
    .mdi-baseline {
        vertical-align: var(--position-baseline);
    }

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

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

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

    /* Icon Animation */
    .mdi-spin {
        animation: spin 1s linear infinite;
    }

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

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