/*
 * Component: modal
 * ----------------
 */
.modal {
  background: rgba(0, 0, 0, 0.3);
}

.modal-content {
  @include border-radius(0);
  @include box-shadow(0 2px 3px rgba(0, 0, 0, .125));
  border: 0;
  @include media-breakpoint-up(sm) {
    @include box-shadow(0 2px 3px rgba(0, 0, 0, .125));
  }
}

.modal-header {
  border-bottom-color: $card-border-color;
}

.modal-footer {
  border-top-color: $card-border-color;
}

//Modal variants
.modal-primary {
  .modal-body {
    @extend .bg-primary;
  }
  .modal-header,
  .modal-footer {
    @extend .bg-primary;
    border-color: darken(theme-color("primary"), 10%);
  }
}

.modal-warning {
  .modal-body {
    @extend .bg-warning;
  }
  .modal-header,
  .modal-footer {
    @extend .bg-warning;
    border-color: darken(theme-color("warning"), 10%);
  }
}

.modal-info {
  .modal-body {
    @extend .bg-info;
  }
  .modal-header,
  .modal-footer {
    @extend .bg-info;
    border-color: darken(theme-color("info"), 10%);
  }
}

.modal-success {
  .modal-body {
    @extend .bg-success;
  }
  .modal-header,
  .modal-footer {
    @extend .bg-success;
    border-color: darken(theme-color("success"), 10%);
  }
}

.modal-danger {
  .modal-body {
    @extend .bg-danger;
  }
  .modal-header,
  .modal-footer {
    @extend .bg-danger;
    border-color: darken(theme-color("danger"), 10%);
  }
}