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


    /* Base Icon */
    .ph,
    .ph-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);
    }

    /* Phosphor Icons */
    .ph-house {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M218.83 103.77l-80-75.48a1.14 1.14 0 0 1-.11-.11 16 16 0 0 0-21.53 0l-.11.11-79.91 75.48A16 16 0 0 0 32 115.55V208a16 16 0 0 0 16 16h48a16 16 0 0 0 16-16v-48h32v48a16 16 0 0 0 16 16h48a16 16 0 0 0 16-16v-92.45a16 16 0 0 0-5.17-11.78zM208 208h-48v-48a16 16 0 0 0-16-16h-32a16 16 0 0 0-16 16v48H48v-92.45l.11-.1L128 40l79.9 75.43.11.1z'/%3E%3C/svg%3E");
    }

    .ph-list {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8zM40 72h176a8 8 0 0 0 0-16H40a8 8 0 0 0 0 16zm176 112H40a8 8 0 0 0 0 16h176a8 8 0 0 0 0-16z'/%3E%3C/svg%3E");
    }

    .ph-x {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128 50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128z'/%3E%3C/svg%3E");
    }

    .ph-magnifying-glass {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66 218.34l-50.07-50.06a88.11 88.11 0 1 0-11.32 11.32l50.06 50.07a8 8 0 0 0 11.32-11.32zM40 112a72 72 0 1 1 72 72 72.08 72.08 0 0 1-72-72z'/%3E%3C/svg%3E");
    }

    /* Phosphor Varianten */
    .ph-regular {
        fill: none;
        stroke-width: 2%;
    }

    .ph-bold {
        fill: none;
        stroke-width: 3%;
    }

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

    .ph-duotone {
        fill: currentcolor;
        opacity: 5000%;
        stroke-width: 2%;
    }

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

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

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

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

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

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

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

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

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

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

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

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