// base styles for every modal popup used in Discourse

.modal-middle-container {
  display: table-cell;
  vertical-align: middle;
}

// Hardcode to be the same as before for now. I would recommend not using bootbox, or finding a way so the html structure can be the same
.bootbox.modal {
  top: 50%;
  left: 50%;
  width: 610px;
  margin: -250px 0 0 -305px;
  .cancel {
    margin-left: 1em;
  }
}

.modal.in {
  -webkit-animation: fade 0.25s;
  animation: fade 0.25s;
}

.modal-body {
  padding: 15px;
}

.modal-footer .btn.right {
  float: right;
}

.modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}

.modal-header {
  h3 {
    font-size: $font-up-3;
  }
}

.close {
  font-size: $font-up-3;
  text-decoration: none;
  color: dark-light-choose($primary-high, $secondary-low);
  cursor: pointer;
  &:hover {
    color: $primary;
  }
}

.modal {
  .category-chooser {
    width: 50%;
  }

  .category-combobox {
    width: 430px;
  }
}

.edit-category-modal {
  .modal-body {
    position: relative;
    height: 420px;
    max-height: 420px;
    padding-bottom: 0;
  }

  .disable_info_wrap {
    .cannot_delete_reason {
      top: -74px;
      right: 4px;
      max-width: 380px;
      min-width: 300px;
    }
  }
}

.topic-bulk-actions-modal {
  p {
    margin-top: 0;
  }
  &.full .modal-body {
    height: 400px;
    max-height: 400px;
  }

  .bulk-buttons {
    display: flex;
    flex-wrap: wrap;
    margin-right: -1%;

    .btn {
      flex: 1 0 30%;
      margin-bottom: 1em;
      margin-right: 1%;
      white-space: nowrap;
      overflow: hidden;
      max-width: 33%;

      @media screen and (max-width: 767px) {
        flex: 1 0 48%;
        max-width: 48%;
      }

      @include breakpoint(mobile) {
        flex: 1 1 auto;
        min-width: 49%;
        max-width: unset;
      }
    }
  }
}

.split-modal {
  .modal-body {
    position: relative;
    height: 350px;
  }

  #move-selected {
    p {
      margin-top: 0;
    }

    input[type="radio"] {
      margin-right: 10px;
    }

    button {
      margin-top: 10px;
      display: block;
      width: 300px;
    }

    .category-chooser {
      margin-bottom: 9px;
    }

    form {
      margin-top: 20px;
      #split-topic-name,
      #choose-topic-title {
        width: 520px;
      }
    }
  }
}

.upload-options {
  margin-left: 20px;
  margin-top: 20px;
}
.uploaded-avatar {
  margin-top: 20px;
}

.uploaded-image-preview {
  width: 400px;
  max-height: 150px;
  margin-bottom: 10px;
}