@alaskaairux/auro-interruption/dist/style-css.js

Auro custom auro-interruption element

import {css} from 'lit-element';
export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.js-focus-visible :focus:not(.focus-visible){outline:3px solid transparent}.heading{margin:1.75rem 0;letter-spacing:-0.2px;font-weight:500}.heading--display{margin-top:0;font-size:2.75rem;font-weight:100;line-height:3.375rem}@media screen and (min-width: 1024px){.heading--display{font-size:3rem;line-height:3.75rem}}@media screen and (min-width: 1232px){.heading--display{font-size:3.5rem;line-height:4.25rem}}.heading--800{font-size:2rem;font-weight:500;line-height:2.375rem}@media screen and (min-width: 1024px){.heading--800{font-size:2.25rem;line-height:2.625rem}}@media screen and (min-width: 1232px){.heading--800{font-size:2.5rem;line-height:3rem}}.heading--700{font-size:1.75rem;font-weight:500;line-height:2.125rem}@media screen and (min-width: 1024px){.heading--700{font-size:2rem;line-height:2.375rem}}@media screen and (min-width: 1232px){.heading--700{font-size:2.25rem;line-height:2.75rem}}.heading--600{margin:1rem 0;font-size:1.625rem;font-weight:300;line-height:1.875rem}@media screen and (min-width: 1024px){.heading--600{font-size:1.75rem;line-height:2.125rem}}@media screen and (min-width: 1232px){.heading--600{font-size:1.75rem;line-height:2.25rem}}.heading--500{margin:1rem 0;font-size:1.375rem;font-weight:300;line-height:1.625rem}@media screen and (min-width: 1024px){.heading--500{font-size:1.5rem;line-height:1.875rem}}@media screen and (min-width: 1232px){.heading--500{font-size:1.5rem;line-height:2rem}}.heading--400{margin:.75rem 0;font-size:1.25rem;font-weight:300;line-height:1.625rem}.heading--300{margin:.75rem 0;font-size:1.125rem;font-weight:300;line-height:1.625rem}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.util_stackPaddingNone--top{padding-top:0}.util_stackPaddingNone--bottom{padding-bottom:0}.util_stackMarginNone--top{margin-top:0}.util_stackMarginNone--bottom{margin-bottom:0}:host{--insetPaddingXl:0 var(--auro-size-xl) var(--auro-size-xl) var(--auro-size-xl);--insetPaddingXxl:0 var(--auro-size-xxl) var(--auro-size-xxl) var(--auro-size-xxl);--insetPaddingXxxl:0 var(--auro-size-xxxl) var(--auro-size-xxxl) var(--auro-size-xxxl)}.dialogOverlay{position:fixed;z-index:-1;bottom:0;left:0;width:100%;height:100%}.dialogOverlay--open{z-index:200;z-index:var(--auro-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.2, 0);background:rgba(0, 0, 0, 0.2)}.dialogOverlay--modal{z-index:200;z-index:var(--auro-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.5, 0);background:rgba(0, 0, 0, 0.5)}.dialog{position:fixed;z-index:-1;right:0;bottom:0;left:0;display:block;visibility:hidden;overflow:auto;width:100%;max-height:90%;padding:var(--insetPaddingXl);transform:translateY(100%);opacity:0;border:0;background:#fff;background:var(--auro-color-background-lightest);color:#222;color:var(--auro-color-text-primary-on-light);transition:all .3s ease-in-out}@media screen and (min-width: 1024px){.dialog{top:10%;bottom:unset;max-width:80%;max-height:80%;margin:auto;padding:var(--insetPaddingXxxl);transform:scale(0);box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.12),0 1px 10px 0 rgba(0, 0, 0, 0.1)}.dialog--open{transform:scale(1)}}@media screen and (min-width: 1232px){.dialog{max-width:986px}}.dialog--open{z-index:400;z-index:var(--auro-depth-modal);visibility:visible;transform:translateY(0%);opacity:1}.dialog-footer{padding-top:2rem;padding-top:var(--auro-size-xl)}@media screen and (min-width: 1024px){.dialog-footer ::slotted(*){display:flex;justify-content:flex-end}}.dialog-header{display:flex;align-items:flex-start;justify-content:space-between;padding-top:4rem;padding-top:var(--auro-size-xxxl)}.dialog-header svg{fill:#626b79;fill:var(--auro-color-text-secondary-on-light)}.dialog-header--action{margin:0;padding:0;border:none;border:2px solid transparent;border-radius:.375rem;border-radius:var(--auro-border-radius);background-color:transparent}.dialog-header--action:hover{cursor:pointer}:host(.focus-visible) .dialog:focus{outline:3px solid #0074c8;outline:3px solid var(--auro-color-border-active-on-light);outline-offset:-3px}:host(.focus-visible) .dialog-header--action:focus{border-color:#0074c8;border-color:var(--auro-color-border-active-on-light)}:host([unformatted]) .dialog-header--action{position:absolute;top:2rem;top:var(--auro-size-xl);right:2rem;right:var(--auro-size-xl)}@media screen and (min-width: 1024px){:host([unformatted]) .dialog-header--action{top:4rem;top:var(--auro-size-xxxl);right:4rem;right:var(--auro-size-xxxl)}}:host([unformatted][onDark]) .dialog-header--action{color:#fff;color:var(--auro-color-base-white)}:host([sm]) .dialog{max-height:30%}@media screen and (min-width: 1024px){:host([sm]) .dialog{top:10%;max-width:40%;max-height:80%;padding:var(--insetPaddingXxl)}}@media screen and (min-width: 1232px){:host([sm]) .dialog{max-width:740px}}:host([md]) .dialog{max-height:50%}@media screen and (min-width: 1024px){:host([md]) .dialog{top:10%;max-width:70%;max-height:80%}}@media screen and (min-width: 1232px){:host([md]) .dialog{top:10%;max-width:986px}}@media screen and (min-width: 1024px){:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:80%}}:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:90%}:host([unformatted]) .dialog{padding:0}`;