@sandlada/mdc/build/components/side-sheet/internal/base-side-sheet.style.js

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

import{css as e}from"../../../node_modules/@lit/reactive-element/css-tag.js";import"../../../node_modules/lit/index.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
const t=e`:host{position:fixed;inset:0;pointer-events:none;background:0 0;color:inherit;z-index:1000;isolation:isolate}dialog{display:block!important;position:fixed;inset:0;box-sizing:border-box;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;outline:0;overflow:hidden;background:0 0;color:var(--_enabled-headline-color,currentColor);pointer-events:none}dialog::backdrop{display:none}.scrim{position:absolute;inset:0;background:var(--_enabled-container-color-modal,#000);opacity:0;pointer-events:none;z-index:0}dialog.standard .scrim{display:none!important}:host([open]) dialog.modal .scrim{opacity:var(--_enabled-container-opacity-modal, .32);pointer-events:auto}.container{position:absolute;top:0;bottom:0;inset-inline-end:0;width:min(var(--_enabled-container-width,400px),100%);max-width:var(--_container-max-width,100%);background:var(--_enabled-container-color,#fff);color:inherit;display:flex;flex-direction:column;border-start-start-radius:var(--_enabled-container-shape-start-start,var(--_container-shape-start-start,28px));border-end-start-radius:var(--_enabled-container-shape-end-start,var(--_container-shape-end-start,28px));border-start-end-radius:var(--_enabled-container-shape-start-end,var(--_container-shape-start-end,0));border-end-end-radius:var(--_enabled-container-shape-end-end,var(--_container-shape-end-end,0));transition:border-radius .2s cubic-bezier(.2, 0, 0, 1);transform:translateX(100%);pointer-events:auto;z-index:1;will-change:transform;touch-action:pan-x}.host.dragged .container,:host([dragged]) .container{border-start-start-radius:var(--_dragged-container-shape-start-start,var(--_enabled-container-shape-start-start,var(--_container-shape-start-start,28px)));border-end-start-radius:var(--_dragged-container-shape-end-start,var(--_enabled-container-shape-end-start,var(--_container-shape-end-start,28px)));border-start-end-radius:var(--_dragged-container-shape-start-end,var(--_enabled-container-shape-start-start,var(--_container-shape-start-start,28px)));border-end-end-radius:var(--_dragged-container-shape-end-end,var(--_enabled-container-shape-end-start,var(--_container-shape-end-start,28px)))}dialog:not([open]){display:none!important}:host([open]) .container{transform:translateX(0)}dialog.edge-start .container{inset-inline-end:auto;inset-inline-start:0;border-start-start-radius:var(--_enabled-container-shape-start-end,var(--_container-shape-start-end,0));border-end-start-radius:var(--_enabled-container-shape-end-end,var(--_container-shape-end-end,0));border-start-end-radius:var(--_enabled-container-shape-start-start,var(--_container-shape-start-start,28px));border-end-end-radius:var(--_enabled-container-shape-end-start,var(--_container-shape-end-start,28px));transform:translateX(-100%)}:host([open]) dialog.edge-start .container{transform:translateX(0)}:host([touch-action=none]) .container{transition:border-radius .2s cubic-bezier(.2, 0, 0, 1)}.container>mdc-elevation{--mdc-elevation-enabled-level:var(--_enabled-container-elevation, 1);--mdc-elevation-enabled-shadow-color:var(--_container-shadow-color, rgba(0, 0, 0, 0.15));position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0}.actions,.content,.headline,mdc-divider{position:relative;z-index:1}.headline{display:flex;align-items:center;gap:8px;padding-inline-start:var(--_headline-container-inline-leading-padding-space,24px);padding-inline-end:var(--_headline-container-inline-trailing-padding-space,12px);padding-block-start:var(--_headline-container-block-leading-padding-space,24px);padding-block-end:var(--_headline-container-block-trailing-padding-space,12px);min-height:56px;color:var(--_enabled-headline-color,currentColor);user-select:none;-webkit-user-select:none}dialog.has-back-icon .headline,dialog.show-back-button .headline{padding-inline-start:var(--_headline-icon-container-inline-leading-padding-space,16px)}.headline-label{flex:1;margin:0;font-family:var(--mdc-typescale-title-large-font, var(--mdc-typescale-title-medium-font, system-ui));font-size:var(--mdc-typescale-title-large-size, 22px);font-weight:var(--mdc-typescale-title-large-weight,400);line-height:var(--mdc-typescale-title-large-line-height, 28px);letter-spacing:var(--mdc-typescale-title-large-tracking, 0)}.close-icon,.headline-icon{flex-shrink:0;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:0 0;border:none;cursor:pointer;color:inherit;border-radius:50%;transition:background-color 150ms cubic-bezier(.2, 0, 0, 1)}.close-icon:hover,.headline-icon:hover{background-color:var(--_icon-hover-container-color,rgba(0,0,0,.08))}.close-icon:active,.headline-icon:active{background-color:var(--_icon-pressed-container-color,rgba(0,0,0,.12))}.headline-icon{color:var(--_enabled-headline-icon-color,currentColor)}.close-icon{color:var(--_enabled-close-icon-color,currentColor)}mdc-divider{--mdc-divider-enabled-color:var(--_enabled-divider-color, currentColor)}.content{flex:1 1 auto;overflow-y:auto;padding-inline-start:var(--_content-container-inline-leading-padding-space,24px);padding-inline-end:var(--_content-container-inline-trailing-padding-space,24px);padding-block-start:var(--_content-container-block-leading-padding-space,16px);padding-block-end:var(--_content-container-block-trailing-padding-space,24px);min-height:0}.actions{flex-shrink:0;padding-block-start:var(--_actions-container-block-leading-padding-space,16px);padding-block-end:var(--_actions-container-block-trailing-padding-space,24px);min-height:var(--_actions-container-height,72px)}.actions[hidden]{display:none}.actions-row{display:flex;gap:8px;align-items:center;padding-inline-start:var(--_content-container-inline-leading-padding-space,24px);padding-inline-end:var(--_content-container-inline-trailing-padding-space,24px)}.focus-trap{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.focus-trap-first{inset-block-start:0;inset-inline-start:0}.focus-trap-last{inset-block-end:0;inset-inline-end:0}.focus-trap{outline:0}`;export{t as baseSideSheetStyles};
//# sourceMappingURL=base-side-sheet.style.js.map