#modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
  opacity: 0;
  pointer-events: none;
  transition: 200ms;
  z-index: 1050;
  user-select: none;
  &.open {
    opacity: 1;
    pointer-events: inherit;
  }
  *[id^='modal'] {
    width: 100%;
    height: 100%;
    position: absolute;
    > div {
      width: 640px;
      position: relative;
      top: 30%;
      transform: translateY(-50%);
      margin: 0 auto;
      opacity: 0;
      transition: 200ms;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
      &.open {
        top: 40%;
        opacity: 1;
      }

      > div:first-child {
        background: white;
        position: relative;
        border-radius: 4px 4px 0 0;
        > div:first-child {
          padding: 16px;
          font-size: 20px;
          color: $text;
          font-weight: bold;

        }
        > div:nth-child(2) {
          position: absolute;
          color: $text;
          right: 4px;
          top: 12px;
          padding: 8px;
          transition: 200ms;
          cursor: pointer;
          &:before {
            content: '✖';
          }
          &:hover {
            transform: rotate(90deg) scale(1.5);
          }
        }
      }
      > div:nth-child(2) {
        background: rgba(255, 255, 255, 0.99);
        padding: 32px 24px;
        div.title {
          font-weight: bold;
          margin-bottom: 8px;
          font-size: 16px;
        }
      }
      > div:nth-child(3) {
        background: white;
        text-align: right;
        padding: 16px;
        border-radius: 0 0 4px 4px;
        > button {
          @extend %button;
        }
      }
      &.warning {
        > div:first-child {
          background: $warning;
          > * {
            color: white !important;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  #modal {
    *[id^='modal'] {
      > div {
        width: calc(100% - 20px);
        width: -webkit-calc(100% - 20px);
      }
    }
  }
}