@mixin ne-modal {
  $modal: #{$prefix}-modal;

  .#{$modal} {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    &-hidden {
      visibility: hidden;
    }
    &-container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      outline: none;
      &-slide-up-appear {
        .#{$modal}-body {
          opacity: 0;
          transform: translateY(50vh);
        }
      }
      &-slide-up-appear-active {
        .#{$modal}-body {
          opacity: 1;
          transform: translateY(0);
          transition: all $animation-duration-base;
        }
      }
      &-slide-up-exit {
        .#{$modal}-body {
          opacity: 1;
          transform: translateY(0);
        }
      }
      &-slide-up-exit-active {
        .#{$modal}-body {
          opacity: 0;
          transform: translateY(50vh);
          transition: all $animation-duration-base;
        }
      }
      &-slide-down-appear {
        .#{$modal}-body {
          opacity: 0;
          transform: translateY(-50vh);
        }
      }
      &-slide-down-appear-active {
        .#{$modal}-body {
          opacity: 1;
          transform: translateY(0);
          transition: all $animation-duration-base;
        }
      }
      &-slide-down-exit {
        .#{$modal}-body {
          opacity: 1;
          transform: translateY(0);
        }
      }
      &-slide-down-exit-active {
        .#{$modal}-body {
          opacity: 0;
          transform: translateY(-50vh);
          transition: all $animation-duration-base;
        }
      }
      &-scale-appear {
        .#{$modal}-body {
          opacity: 0;
          transform: scale(0.1);
        }
      }
      &-scale-appear-active {
        .#{$modal}-body {
          opacity: 1;
          transform: scale(1);
          transition: all $animation-duration-base;
        }
      }
      &-scale-exit {
        .#{$modal}-body {
          opacity: 1;
          transform: scale(1);
        }
      }
      &-scale-exit-active {
        .#{$modal}-body {
          opacity: 0;
          transform: scale(0.1);
          transition: all $animation-duration-base;
        }
      }
    }
    &-body {
      display: flex;
      position: relative;
      overflow-y: auto;
      flex: 0 1 auto;
      flex-direction: column;
      max-height: calc(100% - #{$modal-margin * 2});
      margin: $modal-margin;
      border-radius: $global-radius;
      box-shadow: $global-shadow;
      outline: none;
      background-color: $white;
      color: $component-default-color;
      &-small {
        width: 400px;
      }
      &-medium {
        width: 520px;
      }
      &-large {
        width: 640px;
        font-size: map-get($font-sizes-map, large);
        .#{$modal}-title {
          font-size: $modal-large-header-font-size;
        }
      }
    }
    &-backdrop {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      background-color: $backdrop-bg;
      -webkit-tap-highlight-color: transparent;
      touch-action: none;
      &-appear {
        opacity: 0;
      }
      &-appear-active {
        opacity: 1;
        transition: opacity $animation-duration-base;
      }

      &-exit {
        opacity: 1;
      }
      &-exit-active {
        opacity: 0;
        transition: opacity $animation-duration-base;
      }
    }

    &-header,
    &-content,
    &-footer {
      position: relative;
    }

    &-header {
      padding: $modal-header-padding-v $modal-padding;
      border-bottom: $global-border-width solid $modal-hr;
      .#{$modal}-close {
        position: absolute;
        top: 50%;
        right: $modal-close-position-right;
        transform: translateY(-50%);
      }
    }

    &-title {
      flex: 1 1 auto;
      margin: 0;
      font-size: $modal-header-font-size;
    }
    &-close {
      position: absolute;
      top: $modal-close-position-top;
      right: $modal-close-position-right;
      z-index: 2;
    }

    &-content {
      overflow-y: auto;
      flex: 1 1 auto;
      padding: $modal-padding;
    }

    &-footer {
      padding: $modal-footer-margin;
      border-top: $global-border-width solid $modal-hr;
      text-align: right;

      .#{$prefix}-button {
        margin: 0 $actions-gutter;
      }
    }
  }
}