@sandlada/mdc/build/components/navigation-bar/navigation-bar.style.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{a}from"../../lit-element-Ho-VPzO1.js";import{NavigationBarDefinition as r}from"../../component-definitions/navigation-bar.definition.js";import"../../utils/controller/attachable-controller.js";import{createWrappedTokens as n}from"../../utils/tokens/create-wrapped-tokens.js";import{stringTokens as i}from"../../utils/tokens/string-tokens.js";import"../../color-CigMJnjV.js";import"../../shape-CrZ0CLVJ.js";import"../../utils/tokens/create-logic-shape-tokens.js";const e=a`:host{${i(n("--mdc-navigation-bar",r))}}:host{display:contents;cursor:default;-webkit-tap-highlight-color:transparent;width:fit-content;position:relative}dialog{position:relative;background:0 0;border:none;flex-direction:column;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:0;overflow:hidden;padding:0;width:inherit;box-sizing:border-box}dialog[open]{display:flex}dialog.vertical{height:var(--_vertical-container-height);border-start-start-radius:min(var(--_vertical-container-shape-start-start),calc(var(--_vertical-container-height)/ 2));border-start-end-radius:min(var(--_vertical-container-shape-start-end),calc(var(--_vertical-container-height)/ 2));border-end-start-radius:min(var(--_vertical-container-shape-end-start),calc(var(--_vertical-container-height)/ 2));border-end-end-radius:min(var(--_vertical-container-shape-end-end),calc(var(--_vertical-container-height)/ 2));padding-inline-start:var(--_vertical-container-inline-leading-space);padding-inline-end:var(--_vertical-container-inline-trailing-space);padding-block-start:var(--_vertical-container-block-leading-space);padding-block-end:var(--_vertical-container-block-trailing-space)}dialog.xr{height:var(--_vertical-xr-container-height);border-start-start-radius:min(var(--_vertical-xr-container-shape-start-start),calc(var(--_vertical-xr-container-height)/ 2));border-start-end-radius:min(var(--_vertical-xr-container-shape-start-end),calc(var(--_vertical-xr-container-height)/ 2));border-end-start-radius:min(var(--_vertical-xr-container-shape-end-start),calc(var(--_vertical-xr-container-height)/ 2));border-end-end-radius:min(var(--_vertical-xr-container-shape-end-end),calc(var(--_vertical-xr-container-height)/ 2));padding-inline-start:var(--_vertical-xr-container-inline-leading-space);padding-inline-end:var(--_vertical-xr-container-inline-trailing-space);padding-block-start:var(--_vertical-xr-container-block-leading-space);padding-block-end:var(--_vertical-xr-container-block-trailing-space)}dialog.horizonal{height:var(--_horizonal-container-height);border-start-start-radius:min(var(--_horizonal-container-shape-start-start),calc(var(--_horizonal-container-height)/ 2));border-start-end-radius:min(var(--_horizonal-container-shape-start-end),calc(var(--_horizonal-container-height)/ 2));border-end-start-radius:min(var(--_horizonal-container-shape-end-start),calc(var(--_horizonal-container-height)/ 2));border-end-end-radius:min(var(--_horizonal-container-shape-end-end),calc(var(--_horizonal-container-height)/ 2));padding-inline-start:var(--_horizonal-container-inline-leading-space);padding-inline-end:var(--_horizonal-container-inline-trailing-space);padding-block-start:var(--_horizonal-container-block-leading-space);padding-block-end:var(--_horizonal-container-block-trailing-space)}.container{display:flex;flex-grow:1;overflow:hidden}.content{display:flex;flex-grow:0;width:100%;overflow:auto}dialog.start .container .content{justify-content:start}dialog.middle .container .content{justify-content:center}dialog.between .container .content{justify-content:space-evenly}dialog.end .container .content{justify-content:end}.background{position:absolute;inset:0;z-index:-1}dialog.vertical .background{background:var(--_vertical-container-color)}dialog.xr .background{background:var(--_vertical-xr-container-color)}dialog.horizonal .background{background:var(--_horizonal-container-color)}::backdrop{background:0 0}`;export{e as navigationBarStyle};