.dialog{
  top:0;
  left:unset;
  max-width:90%;
  height:100%;
  max-height:unset;
  transform:translateX(100%);
}
.dialog--open{
  transform:translateX(0%);
}

:host([left]) .dialog{
  right:unset;
  left:0;
  transform:translateX(-100%);
}
:host([left]) .dialog--open{
  transform:translateX(0%);
}

@media screen and (min-width: 1024px){
  :host([sm]) .dialog,
:host([md]) .dialog,
:host([lg]) .dialog{
    top:0%;
    max-height:unset;
  }
}
:host([sm]) .dialog,
:host([md]) .dialog,
:host([lg]) .dialog{
  max-height:100%;
}

@media screen and (min-width: 1024px){
  :host([sm][lg]) .dialog,
:host([md][lg]) .dialog{
    max-height:100%;
  }
}
:host([sm][lg]) .dialog,
:host([md][lg]) .dialog{
  max-height:100%;
}