.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity);
  transition: opacity .15s linear;
  display: flex;
  justify-content: center;
  overflow: auto;

  .modal-wrapper {
    width: 100%;
    height: 100%;

    .modal-container {
      width: 100%;
      margin: 0px auto;
      background-color: $modal-bg;
      border-radius: $modal-border-radius;
      transition: transform .3s ease-out;
      box-shadow: $modal-box-shadow;
      margin: 1.75rem auto;
      overflow: hidden;

      .modal-header {
        padding: $modal-content-padding;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        h4 {
          margin-bottom: 0;
        }

        .modal-close {
          background-image: url('~@e9ine/vue_components/src/assets/close-dark.svg');
          height: 14px;
          width: 14px;
          opacity: 0.5;

          &:hover {
            color: $dark;
            opacity: 1;

          }

        }
      }

      .modal-body {
        padding: $modal-content-padding;
      }

      .modal-footer {
        padding: $modal-content-padding;
        border-top: $border-width solid $line-color;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;

        .btn:not(:last-child) {
          margin-right: 1rem;
        }

      }

    }
  }

  &[centered] {
    align-items: center;
  }

  &[primary] {
    .modal-container {
      .modal-header {
        background-color: $brand-primary;

        h4 {
          color: #fff;
        }

        .modal-close {
          background-image: url('~@e9ine/vue_components/src/assets/close.svg');
        }

        ;
      }
    }
  }
}


/*
 * The following styles are auto-applied to elements with
 * transition="modal" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the modal transition by editing
 * these styles.
 */

.modal-enter,
.modal-leave-active {
  opacity: 0;
}

.modal-enter-active .modal-container {
  transform: translate(0, 0);
}

.modal-enter .modal-container,
.modal-leave .modal-container {
  transform: translate(0, -25%);
}


@include media-breakpoint-down(xs) {
  .modal-mask {
    .modal-wrapper {
      margin: .5rem;
    }
  }
}

@include media-breakpoint-up(sm) {
  .modal-wrapper {
    max-width: $modal-md;
    margin: .5rem;
  }

  .modal-sm {
    max-width: $modal-sm;
  }
}

@include media-breakpoint-up(lg) {

  .modal-lg,
  .modal-xl {
    max-width: $modal-lg;
  }
}

@include media-breakpoint-up(xl) {
  .modal-xl {
    max-width: $modal-xl;
  }
}