@layer components {
    .logo {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;

        /* Predvolené (vertical) */
        flex-direction: column;
        text-align: center;
        gap: 10px;

        /* Orientácia */

        &[data-orientation="horizontal"] {
            flex-direction: row;
            text-align: left;
            gap: -15px; /* Záporný gap na prekrytie */

            & .logo__wrapper {
                margin-bottom: 0;
                z-index: 1; /* Ikona bude nad žiarením ale pod textom ak treba */
            }

            & .logo__text {
                margin-left: -17px; /* Posunutie textu doľava cez ikonu */
                z-index: 2; /* Text nad ikonou */
            }
        }

        &[data-orientation="vertical"] {
            flex-direction: column;
            text-align: center;
            gap: var(--space-xs, 10px);
        }

        & .logo__wrapper {
            position: relative;
            display: inline-block;
        }

        & .logo__glow {
            position: absolute;
            top: 50%;
            left: 50%;
            width: calc(var(--logo-width) * 1.8);
            height: calc(var(--logo-height) * 1.8);
            transform: translate(-50%, -50%);
            background: radial-gradient(circle, var(--color-blue-primary, rgba(0, 123, 255, 0.9)), transparent 70%);
            filter: blur(30px);
            z-index: 0;
            opacity: 0.8;
            animation: logo-glow-pulse 8s ease-in-out infinite;
        }

        @keyframes logo-glow-pulse {
            0%, 100% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.6;
            }
            50% {
                transform: translate(-50%, -50%) scale(1.15);
                opacity: 0.9;
            }
        }

        & .logo__icon {
            position: relative;
            z-index: 1;
            width: var(--logo-width);
            height: var(--logo-height);
            color: var(--color-text, #e5e5e5);

            & svg {
                width: 100%;
                height: 100%;
                display: block;
            }
        }

        & .logo__text {
            font-size: var(--logo-text-size, var(--size-step-3, 48px));
            font-weight: 500;
            color: var(--color-text-muted, #d1d5db);
            text-shadow: 0 0 15px var(--color-blue-primary, rgba(0, 123, 255, 0.6));

            & .logo__text--accent {
                color: var(--color-primary);
            }
        }

        /* Dark mode */
        @media (prefers-color-scheme: dark) {
            & .logo__text {
                color: var(--color-white, #ffffff);
            }
        }
    }
}