{$class-popup}
  @extend $align-center-xs, $none, $level-1000
  box-shadow: $var-popup-box-shadow unless $var-popup-box-shadow is false
  fixed: top 50% left 50%
  max-width: $var-popup-max-width unless $var-popup-max-width is false or is-ident($var-popup-max-width)
  min-width: $var-popup-min-width unless $var-popup-min-width is false or is-ident($var-popup-min-width)
  padding: $var-popup-padding unless $var-popup-padding is false or is-ident($var-popup-padding)
  transform: translateX(-50%) translateY(-50%);

{$class-popup-modal}
  @extend $none, $level-900
  background-color: $var-popup-modal-background-color unless $var-popup-modal-background-color is false or is-ident($var-popup-modal-background-color)
  fixed: top 0 left 0
  shape-square: 100%

{$class-popup-modal--visible}
  @extend $block-xs

{$class-popup--black}
  @extend $scheme--black

{$class-popup--blue}
  @extend $scheme--blue

{$class-popup--gray}
  @extend $scheme--gray

{$class-popup--green}
  @extend $scheme--green

{$class-popup--orange}
  @extend $scheme--orange

{$class-popup--purple}
  @extend $scheme--purple

{$class-popup--red}
  @extend $scheme--red

{$class-popup--yellow}
  @extend $scheme--yellow

{$class-popup--white}
  @extend $scheme--white

{$class-popup--rounded}
  border-radius: $var-popup-border-radius unless $var-popup-border-radius is false or is-ident($var-popup-border-radius)
  overflow: hidden

{$class-popup--visible}
  @extend $block-xs

{$class-popup__text}
  padding: $var-popup__text-padding unless $var-popup__text-padding is false or is-ident($var-popup__text-padding)
  + {$class-popup__text}
    padding: $var-popup__text-sibling-padding unless $var-popup__text-sibling-padding is false or is-ident($var-popup__text-sibling-padding)