/*
 * 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: 100;
        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);
        
        & .topbar__container {
            max-width: 1200px;
            margin: 0 auto;
            padding-inline: var(--space-md);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        & .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;
            
            & .topbar__logo-accent {
                color: var(--color-accent-red);
            }
        }
        
        & .topbar__cart-btn {
            background: transparent;
            border: 1px solid var(--color-border-glass);
            color: var(--color-text-main);
            font-family: var(--font-family-body);
            padding: var(--space-xs) var(--space-md);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all var(--transition-physical);
            
            &:hover {
                background: rgba(255, 255, 255, 0.05);
                color: var(--color-text-heading);
                border-color: var(--color-accent-blue);
            }
        }
    }
}