.modal-backdrop {
  transition: $transition-base;
  content: '';
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  position: fixed;
  background-color: transparent;
  z-index: 98;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;

  &.open {
    background-color: rgba($dark, 0.8);
    pointer-events: all;

    .modal {
      transform: scale(1);
    }
  }

  .modal {
    padding: 30px;
    width: 60vh;
    background-color: white;
    transform: scale(0);
    transition: $transition-base;

    &.warning,
    &.info,
    &.danger {
      &:before {
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
        opacity: 0.6;
      }
    }

    &.danger {
      h1 {
        color: $danger;
      }

      &:before {
        @include icon-font($danger, 8rem);
        content: '\e912';
      }
    }

    &.info {
      h1 {
        color: $info;
      }

      &:before {
        @include icon-font($info, 8rem);
        content: '\e906';
      }
    }

    &.warning {
      h1 {
        color: $warning;
      }

      &:before {
        @include icon-font($warning, 8rem);
        content: '\e912';
      }
    }
  }

  footer {
    button {
      margin-left: 15px;
    }
  }
}