{$class-dialog}
  @extend $invisible, $level-500, $scheme--white
  border-radius: $var-dialog-border-radius unless $var-dialog-border-radius is false or is-ident($var-dialog-border-radius)
  box-shadow: $var-dialog-box-shadow unless $var-dialog-box-shadow is false
  max-height: $var-dialog--full-size-height unless $var-dialog--full-size-height is false or is-ident($var-dialog--full-size-height)
  max-width: $var-dialog-max-width unless $var-dialog-max-width is false or is-ident($var-dialog-max-width)
  min-width: $var-dialog-min-width unless $var-dialog-min-width is false or is-ident($var-dialog-min-width)
  opacity: 0
  fixed: left 50%
  overflow: hidden
  transform: translateX(-50%)
  transition: $var-dialog-transition unless $var-dialog-transition is false

{$class-dialog--full-size}
  @extend $flex-xs
  flex-flow: column;
  max-width: none;
  height: $var-dialog--full-size-height unless $var-dialog--full-size-height is false or is-ident($var-dialog--full-size-height)
  width: $var-dialog--full-size-width unless $var-dialog--full-size-width is false or is-ident($var-dialog--full-size-width)

{$class-dialog-overlay}
  @extend $level-400, $none-xs
  background-color: $c--dialog-overlay-background-color unless $c--dialog-overlay-background-color is false or is-ident($c--dialog-overlay-background-color)
  fixed: top 0 left 0
  shape-square: 100%

{$class-dialog-overlay}{$class-dialog-overlay--visible}
  @extend $block-xs

{$class-dialog--black} {$class-dialog__header}
  @extend $scheme--black

{$class-dialog--blue} {$class-dialog__header}
  @extend $scheme--blue

{$class-dialog--gray} {$class-dialog__header}
  @extend $scheme--gray

{$class-dialog--green} {$class-dialog__header}
  @extend $scheme--green

{$class-dialog--orange} {$class-dialog__header}
  @extend $scheme--orange

{$class-dialog--purple} {$class-dialog__header}
  @extend $scheme--purple

{$class-dialog--red} {$class-dialog__header}
  @extend $scheme--red

{$class-dialog--yellow} {$class-dialog__header}
  @extend $scheme--yellow

{$class-dialog--visible}
  @extend $level-1000, $visible
  opacity: 1

{$class-dialog--bottom}
  bottom 0

{$class-dialog--center}
  top 50%
  transform: translateX(-50%) translateY(-50%)

{$class-dialog--top}
  top 0

{$class-dialog__content}
  @extend $block
  overflow-y: scroll;
  +cache('padding'+ $var-dialog__content-padding)
    padding: $var-dialog__content-padding unless $var-dialog__content-padding is false or is-ident($var-dialog__content-padding)
  {$class-dialog--full-size} &
    flex-grow: 1;

{$class-dialog__footer}
  @extend $block
  +cache('padding'+ $var-dialog__footer-padding)
    padding: $var-dialog__footer-padding unless $var-dialog__footer-padding is false or is-ident($var-dialog__footer-padding)

{$class-dialog__header}
  @extend $block
  +cache('padding'+ $var-dialog__header-padding)
    padding: $var-dialog__header-padding unless $var-dialog__header-padding is false or is-ident($var-dialog__header-padding)