/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

/* Styles for Topbar component */
@layer components {
    .topbar {
        position: sticky;
        top: 0;
        z-index: 300;
        width: 100%;
        background: var(--color-bg-surface-glass);
        backdrop-filter: blur(var(--glass-blur));
        -webkit-backdrop-filter: blur(var(--glass-blur));
        border-bottom: 1px solid var(--color-border-glass);
        padding-block: var(--space-sm);
        isolation: isolate;

        & .topbar__container {
            max-width: 1200px;
            margin: 0 auto;
            padding-inline: var(--space-md);
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: var(--space-md);
        }

        & .topbar__logo {
            font-family: var(--font-family-heading);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-text-heading);
            text-transform: uppercase;
            letter-spacing: 1px;
            flex-shrink: 0;

            & .topbar__logo-accent {
                color: var(--color-accent-red);
            }
        }

        /* Main nav (mainMenu=true) */
        & .topbar__nav {
            display: none;
            align-items: center;
            gap: var(--space-xs);

            @media (min-width: 768px) {
                display: flex;
            }
        }

        & .topbar__nav-link {
            font-family: var(--font-family-heading);
            font-size: 0.9rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--color-text-main);
            padding: var(--space-xs) var(--space-sm);
            border-radius: var(--radius-sm);
            transition: color var(--transition-physical), background var(--transition-physical);

            &:hover {
                color: var(--color-text-heading);
                background: color-mix(in srgb, var(--color-text-heading) 6%, transparent);
            }

            &.is-active {
                color: var(--color-accent-blue);
            }
        }

        /* Right-side actions */
        & .topbar__actions {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        /* Hamburger wrap (mainMenu=false) */
        & .topbar__hamburger-wrap {
            position: relative;
        }

        & .topbar__hamburger-btn {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 5px;
            width: 36px;
            height: 36px;
            background: transparent;
            border: 1px solid var(--color-border-glass);
            border-radius: var(--radius-sm);
            cursor: pointer;
            padding: 6px;
            transition: border-color var(--transition-physical), background var(--transition-physical);

            & span {
                display: block;
                width: 18px;
                height: 2px;
                background: var(--color-text-main);
                border-radius: 2px;
                transition: transform 0.25s ease, opacity 0.25s ease, background var(--transition-physical);
                transform-origin: center;
            }

            &:hover {
                border-color: var(--color-accent-blue);
                background: color-mix(in srgb, var(--color-text-heading) 5%, transparent);

                & span {
                    background: var(--color-text-heading);
                }
            }

            &[aria-expanded="true"] {
                border-color: var(--color-accent-blue);

                & span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
                & span:nth-child(2) { opacity: 0; transform: scaleX(0); }
                & span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
            }
        }

        & .topbar__hamburger-menu {
            position: absolute;
            top: calc(100% + var(--space-xs));
            right: 0;
            min-width: 200px;
            background: var(--color-bg-surface);
            border: 1px solid var(--color-border-glass);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-premium);
            padding: var(--space-xs);
            display: flex;
            flex-direction: column;
            gap: 2px;
            z-index: 200;

            /* closed state */
            opacity: 0;
            transform: translateY(-8px) scale(0.97);
            pointer-events: none;
            visibility: hidden;
            transition:
                opacity 0.2s ease,
                transform 0.2s ease,
                visibility 0s 0.2s;

            &[data-state="open"] {
                opacity: 1;
                transform: translateY(0) scale(1);
                pointer-events: auto;
                visibility: visible;
                transition:
                    opacity 0.2s ease,
                    transform 0.2s ease;
            }
        }

        & .topbar__hamburger-link {
            font-family: var(--font-family-heading);
            font-size: 0.9rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--color-text-main);
            padding: var(--space-sm) var(--space-md);
            border-radius: var(--radius-sm);
            white-space: nowrap;
            transition: color var(--transition-physical), background var(--transition-physical);

            &:hover {
                color: var(--color-text-heading);
                background: color-mix(in srgb, var(--color-text-heading) 6%, transparent);
            }

            &.is-active {
                color: var(--color-accent-blue);
            }

            /* Hide mainMenu=true items in hamburger on desktop — they're in the inline nav */
            &.topbar__hamburger-link--mobile-only {
                @media (min-width: 768px) {
                    display: none;
                }
            }
        }

        & .topbar__hamburger-divider {
            border: none;
            border-top: 1px solid var(--color-border-glass);
            margin-block: var(--space-2xs);

            &.topbar__hamburger-divider--mobile-only {
                @media (min-width: 768px) {
                    display: none;
                }
            }
        }

        /* Hide hamburger btn on desktop only when there are no burgerItems */
        /* (handled in template — btn shows whenever mainItems or burgerItems exist) */
        & .topbar__hamburger-wrap {
            @media (min-width: 768px) {
                /* Show only if hamburger menu still has visible (non-mobile-only) items */
                &:not(:has(.topbar__hamburger-link:not(.topbar__hamburger-link--mobile-only))) {
                    display: none;
                }
            }
        }
    }
}