.modal {
  .modal-dialog {
    max-width: 560px;

    @media (min-height: $bp-small) {
      margin-top: 10rem;
    }
  }

  .modal-content {
    border: none;

    .modal-header {
      border-bottom: none;
      padding: 1.5rem 1.5rem 0;
    }

    .modal-title {
      font-size: $font-size-large;
      font-weight: 600;
    }

    .modal-body {
      padding: 1rem 1.5rem 1.5rem;
      font-size: $font-size-small;

      form {
        label {
          font-size: $font-size-small;
          margin-bottom: 0;
        }

        .form-control {
          background: $white;
          border: 1px solid $mediumgrey;
          border-radius: 0.375rem;
          font-size: $font-size-base;
          height: 3rem;
          padding: 1rem;
          color: $black;

          &:focus {
            border-color: $innovationblue;
          }

          &.is-invalid {
            border-color: $red;
          }
        }

        textarea.form-control {
          height: auto;
        }

        .custom-control-label::before {
          border-color: $mediumgrey;
        }

        .custom-control-input:checked ~ .custom-control-label::before {
          background-color: $blue;
          border-color: $blue;
        }

        .custom-checkbox {
          label {
            font-size: 1rem;
          }
        }

        .form-group:focus-within {
          border-color: $blue;
          color: $blue;
        }
      }
    }
  }

  .modal-footer {
    border: 0;
    justify-content: space-between;
    padding: 1rem 0 0;

    .btn-danger {
      margin-right: 0.5rem;

      &:hover {
        background-color: #dc3545;
        border-color: #dc3545;
      }
    }
  }
}

.modal + .modal-backdrop {
  opacity: 0.7;
}