.rag-modal {
  @extend %fill;
  @extend %ragcenter;

  top: 0 !important;
  left: 0 !important;

  height: 100%;
  padding: $padding-content;
  z-index: 1;
}

.rag-modal-backdrop {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiqAcAAIgAgoGu+rEAAAAASUVORK5CYII=");
  background: rgba(0, 0, 0, .35);
}

/**
 * 1. Without a z-index set some content overflows in Webkit.
 */
.rag-modal-window {
  @extend %panel;

  position: relative;
  min-width: $grid-unit;
  min-height: $rag-button-size-large;
  max-width: 100%;
  max-height: 100%;
  z-index: 0; /* 1 */
}

/**
 * 1. On iOS, elements positioned on top of iframes don’t receive
 *    touch events without this.
 */
.rag-modal-close {
  $close-icon-size: 24px;

  position: absolute;
  top: 0;
  right: 0;
  box-sizing: content-box;
  width: $close-icon-size;
  height: $close-icon-size;
  padding: 5px 5px 15px 15px;
  background-position: 15px 5px;
  z-index: 1; /* 1 */
}