.ias-dialog {
  background-color: $dialog-scrim-color;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 10;

  .ias-dialog-container {
    @extend .ias-border-1;

    background: #fff;
    left: 0;
    margin: 0 $dialog-padding;
    max-height: 100%;
    max-width: 100%;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 40%;
    transform: translateY(-40%);

    .ias-dialog-content {
      padding: $dialog-padding;

      > .ias-actions {
        margin-top: $dialog-padding;
      }

      .ias-dialog-cancel-button {
        position: absolute;
        right: $body-spacing-small;
        top: $body-spacing-small;
      }

      .ias-dialog-label {
        color: $dialog-label-color;
        font-size: $font-size;
        margin-bottom: $spacing;
        padding-right: $content-padding;
        text-transform: $title-text-transform;
      }

      .ias-dialog-title {
        @extend .ias-heading;

        margin-bottom: $dialog-padding;
      }

      p {
        color: $dialog-content-color;
      }
    }
  }
}

@media (min-width: $medium-display) {
  .ias-dialog {
    .ias-dialog-container {
      margin: 0 auto;
      max-width: none;
      width: 415px;     // Use width so "margin: 0 auto" will display properly on parent element in IE11
    }
  }
}

[dir="rtl"] {
  .ias-dialog {
    .ias-dialog-container {
      .ias-dialog-content {
        .ias-dialog-cancel-button {
          left: $body-spacing-small;
          right: auto;
        }
      }
    }
  }
}