.layout-topbar { position: fixed; top: 0; left: 0; width: calc(100% - var(--scrollbar-width, 0px)); z-index: 1100; transition: background-color 1s; border-bottom: 1px solid var(--topbar-border); &.layout-topbar-sticky { backdrop-filter: blur(8px); } } .layout-topbar-inner { height: 4rem; padding: 0 4rem; display: flex; align-items: center; justify-content: space-between; .layout-topbar-logo-container { width: 250px; margin-right: 4rem; } .layout-topbar-logo { svg { width: 120px; } } .layout-topbar-icon { display: none; svg { width: 25px; } } .menu-button { display: none; } } .layout-light { .layout-topbar { &.layout-topbar-sticky { background-color: rgba(255,255,255,.7); } } } .layout-dark { .layout-topbar { &.layout-topbar-sticky { background-color: rgba(0,0,0,.3); } } }