// Name:            Modals
//
// Component:       `modal`
//
// Modifiers:       `modal-top`
//                  `modal-center`
//                  `modal-bottom`
//                  `modal-sidebar`
//                  `modal-fill-in`
//                  `modal-primary`
//                  `modal-success`
//                  `modal-info`
//                  `modal-warning`
//                  `modal-danger`
//                  `modal-fade-in-scale-up`
//                  `modal-slide-in-right`
//                  `modal-slide-from-bottom`
//                  `modal-newspaper`
//                  `modal-fall`
//                  `modal-side-fall`
//                  `modal-3d-flip-horizontal`
//                  `modal-3d-flip-vertical`
//                  `modal-3d-sign`
//                  `modal-super-scaled`
//                  `modal-just-me`
//                  `modal-3d-slit`
//                  `modal-rotate-from-bottom`
//                  `modal-rotate-from-left`
//
// ========================================================================

// Variables
// ========================================================================

$modal-sidebar-bg          : $inverse !default;

$modal-fill-in-bg          : rgba(255, 255, 255, 0.95) !default;

$modal-primary-color       : $inverse !default;
$modal-primary-bg          : $brand-primary !default;

$modal-success-color       : $inverse !default;
$modal-success-bg          : $brand-success !default;

$modal-info-color          : $inverse !default;
$modal-info-bg             : $brand-info !default;

$modal-warning-color       : $inverse !default;
$modal-warning-bg          : $brand-warning !default;

$modal-danger-color        : $inverse !default;
$modal-danger-bg           : $brand-danger !default;

// Component: Modal
// ========================================================================
.modal-content {
  border: none;
  box-shadow: $modal-content-shadow;
}

.modal-header {
  border-bottom: none;
}
.modal-footer {
  border-top: none;
}

// Modifier: `modal-sidebar`
// -------------------------

.modal-sidebar {
  background-color: $modal-sidebar-bg;

  .modal-content {
    background-color: transparent;
  }
  .modal-header {
    border-bottom: none;
  }
  .modal-footer {
    border-top: none;
  }
}


// Modifier: `modal-fill-in`
// -------------------------

.modal-fill-in {
  background-color: transparent;

  &.in {
    background-color: $modal-fill-in-bg;
  }

  .modal-content {
    background-color: transparent;
  }
  .modal-header {
    border-bottom: none;
  }
  .modal-footer {
    border-top: none;
  }
}


// Color Modifier
// ========================================================================

// Modifier: `modal-primary`
// -------------------------

.modal-primary {
  @include modal-styles-variant($modal-primary-color, $modal-primary-bg);
}

// Modifier: `modal-success`
// -------------------------

.modal-success {
  @include modal-styles-variant($modal-success-color, $modal-success-bg);
}

// Modifier: `modal-info`
// -------------------------

.modal-info {
  @include modal-styles-variant($modal-info-color, $modal-info-bg);
}

// Modifier: `modal-warning`
// -------------------------

.modal-warning {
  @include modal-styles-variant($modal-warning-color, $modal-warning-bg);
}

// Modifier: `modal-danger`
// -------------------------

.modal-danger {
  @include modal-styles-variant($modal-danger-color, $modal-danger-bg);
}

// Animate Modifier
// ========================================================================

.modal {
  // Modifier: `modal-just-me`
  // -------------------------

  &.modal-just-me {
    .modal-backdrop {
      background-color: $inverse;
    }

    &.in {
      background: $modal-content-bg;
    }
  }
}