@cds/core/internal-components/popup/popup.element.scss.js

Clarity Design System - common components, themes, and utilties

import{css as o}from"lit";var t=o`:host{--backdrop-background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--layered-backdrop-background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--border-color:var(--cds-alias-object-border-color, var(--cds-global-color-construction-200, #cbd4d8));--border-width:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20)));--border-radius:var(--cds-alias-object-border-radius-100, calc(4 * 1rem / var(--cds-global-base, 20)));--padding:var(--cds-global-space-7, calc(16 * 1rem / var(--cds-global-base, 20)));--active-corner-border-radius:0;--color:var(--cds-global-typography-color-500, var(--cds-global-color-black, black));--close-button-offset:var(--cds-global-space-1, calc(1 * 1rem / var(--cds-global-base, 20)));--background:var(--cds-alias-object-interaction-background, var(--cds-global-color-white, white));--box-shadow:var(--cds-alias-object-shadow-100, 0 calc(1 / var(--cds-global-base, 20) * 1rem) calc(3 / var(--cds-global-base, 20) * 1rem) 0 rgba(27, 43, 50, 0.5));--min-width:6rem;--max-width:18rem;--width:fit-content;--height:auto;--max-height:auto;--mobile-max-height:66vh;--overflow:hidden auto;--animation-duration:var(--cds-global-animation-duration-primary, 0.4s);--animation-easing:var(--cds-global-animation-easing-primary, cubic-bezier(0, 0.99, 0, 0.99));position:fixed;top:0;bottom:0;left:0;right:0;z-index:1000000}::slotted(cds-internal-pointer){--pointer-fill:var(--background);--pointer-outline:var(--border-color)}.private-host{display:block;position:relative}.popup-wrapper{display:flex;flex-direction:column;width:fit-content}.popup-content{background:var(--background);color:var(--color);border-radius:var(--border-radius);border-color:var(--border-color);border-width:var(--border-width);border-style:solid;box-shadow:var(--box-shadow);min-width:var(--min-width);padding:var(--padding);width:var(--width);max-width:var(--max-width);height:var(--height);max-height:var(--max-height);overflow:var(--overflow);position:relative}:host([_position-at="popup-left pointer-top"]) .popup-content,:host([_position-at="popup-top pointer-left"]) .popup-content{border-top-left-radius:var(--active-corner-border-radius)}:host([_position-at="popup-right pointer-top"]) .popup-content,:host([_position-at="popup-top pointer-right"]) .popup-content{border-top-right-radius:var(--active-corner-border-radius)}:host([_position-at="popup-bottom pointer-right"]) .popup-content,:host([_position-at="popup-right pointer-bottom"]) .popup-content{border-bottom-right-radius:var(--active-corner-border-radius)}:host([_position-at="popup-bottom pointer-left"]) .popup-content,:host([_position-at="popup-left pointer-bottom"]) .popup-content{border-bottom-left-radius:var(--active-corner-border-radius)}:host([_pointer-type=default]){--active-corner-border-radius:var(--border-radius)}cds-internal-close-button{position:absolute;top:var(--close-button-offset);right:var(--close-button-offset);margin:var(--cds-global-space-3,calc(4 * 1rem / var(--cds-global-base,20)))}:host([_position-at*=popup-top]) .popup-wrapper{flex-direction:column-reverse}:host([_position-at*=popup-top]) .popup-pointer{transform:translateY(var(--border-width))}:host([_position-at*=pointer-center]) .popup-wrapper,:host([_position-at*=pointer-mid]) .popup-wrapper{align-items:center}:host([_position-at="popup-top pointer-right"]) .popup-wrapper{align-items:flex-end}:host([_position-at="popup-top pointer-right"]) .popup-pointer{transform:scaleX(-1) translateY(var(--border-width))}:host([_position-at*=popup-bottom]) .popup-pointer{transform:scaleY(-1) translateY(var(--border-width))}:host([_position-at="popup-bottom pointer-right"]) .popup-wrapper{align-items:flex-end}:host([_position-at="popup-bottom pointer-right"]) .popup-pointer{transform:scaleY(-1) scaleX(-1) translateY(var(--border-width))}:host([_position-at*=popup-left]) .popup-wrapper{flex-direction:row-reverse}:host([_position-at*=popup-left]) .popup-pointer{transform-origin:right top;transform:scaleY(-1) rotate(-90deg) translateY(calc(-100% + var(--border-width))) translateX(100%)}:host([_position-at="popup-left pointer-bottom"]) .popup-wrapper{align-items:flex-end}:host([_position-at="popup-left pointer-bottom"]) .popup-pointer{transform:rotate(90deg) scaleY(-1) translateY(var(--border-width));transform-origin:bottom right}:host([_position-at="popup-left pointer-bottom"][_pointer-type=angle]) .pointer-wrapper{transform-origin:center center;transform:scaleY(-1)}:host([_position-at*=popup-right]) .popup-wrapper{flex-direction:row}:host([_position-at*=popup-right]) .popup-pointer{transform-origin:left top;transform:rotate(90deg) translateY(calc(-100% + var(--border-width)))}:host([_position-at="popup-right pointer-bottom"]) .popup-wrapper{align-items:flex-end}:host([_position-at="popup-right pointer-bottom"]) .popup-pointer{transform:rotate(-90deg) scaleY(-1) translateY(var(--border-width));transform-origin:bottom left}:host(:not([responsive])){--backdrop-background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0))}:host([responsive]){--backdrop-background:var(--cds-alias-object-overlay-backdrop-background, rgba(0, 0, 0, 0.6))}:host([responsive]) cds-internal-pointer{display:none}:host([responsive]) .popup-content,:host([responsive]) .popup-wrapper,:host([responsive]) .private-host{width:100%;max-width:100%;height:auto;max-height:var(--mobile-max-height)}:host([responsive]) .private-host{position:absolute;bottom:0;left:0}:host([responsive]) .popup-content{border-radius:0}:host([responsive]) .pointer-wrapper{display:none}:host([cds-motion][_cds-animation-status=active]){display:inline-flex!important}:host([hidden]){--animation-duration:var(--cds-global-animation-duration-secondary, 0.3s)}:host([hidden*=false]){display:inline-flex!important}`;export{t as default};
//# sourceMappingURL=popup.element.scss.js.map