import { css } from '@tesseract-design/css-utils'; import {LayoutArgs, Span} from '../common'; export const Base = () => css.cx( css` position: fixed; top: 0; left: 0; width: 100%; height: var(--height-topbar, 4rem); z-index: 2; & > * { display: block; width: 100%; height: 100%; background-color: white; } & ~ * { padding-top: var(--height-topbar, 4rem);; } ~ main ~ * { padding-top: 0; } `, css.media('(min-width: 1080px)')( css` ~ main ~ * { padding-top: var(--height-topbar, 4rem); } ` ) ); export const Container = ({ span, }: LayoutArgs) => css.cx( css` padding: 0 1rem; box-sizing: border-box; margin: 0 auto; width: 100%; height: 100%; display: flex; align-items: center; position: relative; z-index: 1; `, css.if(span === Span.NARROW)( css` max-width: var(--base-width); ` ), css.if(span === Span.NORMAL)( css` max-width: calc(var(--base-width) * 3); ` ), css.if(span === Span.WIDE)( css.media('(min-width: 1080px)')( css` max-width: calc(var(--base-width) * 3); ` ) ), ); export const CenterContainer = () => css.cx( css` flex: auto; padding: 0 1rem; box-sizing: border-box; `, css.nest(':first-child')( css` padding-left: 0; ` ) ) export const ActionContainer = () => css.cx( css` display: flex; align-items: center; justify-content: flex-end; height: 100%; white-space: nowrap; `, css.media('(min-width: 720px)')( css` min-width: 8rem; ` ) ); export const LinkContainer = () => css.cx( css` width: var(--height-topbar, 4rem); height: 100%; & > * { width: 100%; height: 100%; display: inline-grid; place-content: center; } ` ); export const MenuLinkContainer = () => css.cx( css` width: var(--height-topbar, 4rem); height: 100%; & > * { width: 100%; height: 100%; display: inline-grid; place-content: center; } `, css.media('(min-width: 1080px)')( css` position: absolute; left: -999999px; ` ) );