body.payment-page-popup-visible {
  overflow: hidden;

  #payment-page-popup-overlay {
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    height: 100vh;
    position: fixed;
    cursor: pointer;
    z-index: 1000000;
    background: rgba(0, 0, 0, 0.5);
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    font-family: var( --payment-page-font-family );

    h1,h2,h3,p,div {
      font-family: var( --payment-page-font-family );
    }

    > #payment-page-popup-wrapper {
      z-index: 5;
      padding: 0;
      width: auto;
      border: none;
      outline: none;
      display: block;
      margin: 0 auto;
      height: auto;
      cursor: default;
      max-width: 640px;
      max-height: 90vh;
      min-width: 500px;
      position: relative;
      @include border-radius( var( --payment-page-layout-border-radius ) );
      @include box-sizing( border-box );
      @include transition( all 0.1s ease );
      @include box-shadow( rgba(0, 0, 0, 0.2) 0 0 50px 20px );

      > #payment-page-popup {
        background: var( --payment-page-layout-primary-background-color );
        margin: 0 auto;
        padding: 30px;
        width: 100%;
        height: auto;
        display: block;
        max-width: 90vw;
        max-height: 90vh;
        overflow: hidden !important;
        -webkit-overflow-scrolling: touch;
        @include box-sizing( border-box );
        @include border-radius( var( --payment-page-layout-border-radius ) );

        iframe {
          width: 100%;
          height: 100%;
        }
      }

      > .payment-page-popup-close-icon {
        z-index: 1;
        top: -24px;
        right: -26px;
        padding: 0;
        width: 28px;
        height: 28px;
        cursor: pointer;
        position: absolute;
        text-align: center;
        vertical-align: top;
        display: inline-block;
        box-shadow: none !important;
        background: transparent !important;

        @media (max-width: $break_point_medium_width) {
          top: -15px;
          right: 11px;
        }

        svg {
          margin  : 0;
          padding : 0;
          width   : 20px;
          height  : 20px;
          fill    : var( --payment-page-layout-primary-background-color );
        }
      }
    }

    @media (max-width: $break_point_medium_width) {
      align-content   : flex-start;
      align-items     : flex-start;
      justify-content : flex-start;
      border-radius   : 0;

      > #payment-page-popup-wrapper {
        min-width      : 100%;
        max-width      : 100%;
        height         : 100%;
        max-height     : calc( 100vh );
        background     : var( --payment-page-layout-primary-background-color );
        display        : flex;
        flex-direction : column-reverse;
        border-radius  : 0;

        @include box-shadow( none );

        > #payment-page-popup {
          margin      : 0;
          padding     : 0 var( --payment-page-spacing-type-block-element );
          height      : 100%;
          width       : 100%;
          max-width   : 100%;
          max-height  : calc( 100vh - 30px );
          overflow    : auto !important;
          -webkit-overflow-scrolling: touch;
        }

        > .payment-page-popup-close-icon {
          top    : 15px;
          right  : 15px;
          width  : auto;
          height : auto;

          svg {
            fill : var( --payment-page-text-color-primary );
          }
        }
      }
    }

    &[data-payment-page-type="large"] > #payment-page-popup-wrapper,
    &[data-payment-page-type="large_quaternary"] > #payment-page-popup-wrapper{
      @media (min-width: $break_point_medium_width) {
        min-width  : 90vw;
        min-height : 90vh;
        height     : 100%;

        > #payment-page-popup {
          padding    : 20px 10px 0 10px;
          height     : 100%;
        }
      }
    }

    &[data-payment-page-type="large_quaternary"] > #payment-page-popup-wrapper > #payment-page-popup {
      background : var( --payment-page-layout-quaternary-background-color );
    }

    &[data-payment-page-type="fullscreen"] > #payment-page-popup-wrapper {
      min-width  : 100vw !important;
      min-height : 100vh !important;

      > #payment-page-popup {
        padding-top : 40px;
        min-width   : 100vw !important;
        min-height  : 100vh !important;
        max-width   : 100vw !important;
        max-height  : 100vh !important;

        [data-payment-page-component="user-authentication"] {
          .payment-page-grid-row > [data-payment-page-grid="12"] {
            max-width : 480px;
            margin    : 0 auto;
          }
        }
      }

      > .payment-page-popup-close-icon {
        top    : 10px;
        width  : auto;
        height : auto;
        right  : 10px;

        svg {
          fill : var( --payment-page-text-color-primary );
        }
      }
    }
  }
}