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

Auro custom auro-interruption element

*, *:before, *:after{
  box-sizing:border-box;
}
@media (prefers-reduced-motion: reduce){
  *, *:before, *:after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.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:calc(1rem + 0.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:0.75rem 0;
  font-size:1.25rem;
  font-weight:300;
  line-height:1.625rem;
}

.heading--300{
  margin:0.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 0.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 0.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:#ffffff;
  background:var(--auro-color-background-lightest);
  color:#222222;
  color:var(--auro-color-text-primary-on-light);
  transition:all 0.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:0.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:#ffffff;
  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;
}