$mslide: #{$prefix}-modal-slide;
$mslide-wrapper: #{$mslide}__wrapper;
$mslide-overlay: #{$mslide}__overlay;
$mslide-overlay-showing: #{$mslide-overlay}--showing;
$mslide-overlay-disappearing: #{$mslide-overlay}--disappearing;
$mslide-content: #{$mslide}__content;
$mslide-actual-content: #{$mslide}__actual-content;
$mslide-header: #{$mslide}__header;
$mslide-footer: #{$mslide}__footer;
$mslide-title: #{$mslide}__title;
$mslide-header-left-side: #{$mslide}__header-left-side;
$mslide-header-wrapper: #{$mslide}__header-wrapper;
$mslide-footer-wrapper: #{$mslide}__footer-wrapper;

$modalContent: #{$prefix}-modal-v2;
$modalContentWrapper: #{$modalContent}__modal-wrapper;
$modal-title: #{$modalContent}__modal-title;

$opacity: 0.25;

@keyframes overlayAnimation {
  0% {
    background: rgba(37, 41, 47, 0);
  }
  100% {
    background: rgba(37, 41, 47, $opacity);
  }
}
@keyframes overlayAnimationOut {
  0% {
    background: rgba(37, 41, 47, $opacity);
  }
  100% {
    background: rgba(37, 41, 47, 0);
  }
}

@keyframes contentAnimationOut {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes contentAnimationIn {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

.#{$mslide-wrapper} {
  position: absolute;
  display: flex;
  height: calc(var(--height, 100%) * 1px);
  width: 100%;
  overflow: hidden;
  top: 0;
  z-index: 10;
}
.#{$mslide-overlay} {
  height: 100%;
  width: 100%;
  background: rgba(37, 41, 47, $opacity);
  display: flex;
  animation: overlayAnimation calc(var(--fade-in, 500) * 1ms) linear;
  &--disappearing {
    animation: overlayAnimationOut calc(var(--fade-out, 500) * 1ms) linear;
  }
}
.#{$mslide-overlay-showing} {
  display: flex;
  height: 100%;
}

.#{$mslide-content} {
  height: calc(var(--height, 100%) * 1px);
  background: color(neutral, 0);
  @include box-shadow(depth(200));
  width: calc(var(--width, 50) * 1%);
  margin-left: auto;
  align-items: center;
  flex-direction: column;
  display: flex;
  overflow-y: auto;
  border: 1px solid color(neutral, 300);
  border-left: 2px solid color(neutral, 300);
  animation: contentAnimationIn calc(var(--fade-in, 500) * 0.5ms) linear;
  &--disappearing {
    animation: contentAnimationOut calc(var(--fade-out, 500) * 1ms) linear;
  }
  .#{$prefix}-separator-wrapper {
    margin-top: unset;
  }
}

.#{$mslide-actual-content} {
  display: flex;
  flex-direction: column;
}

.#{$mslide-header-left-side} {
  width: 100%;
  display: flex;
  flex-direction: row;
  text-align: left;
  padding: space(xs) space(s) space(xs) 0;
  height: space(xl);

  .em-ds-button {
    .em-ds-icon {
      fill: color(brand-primary, 600);
    }
  }
  .close-button {
    padding-left: 18px;
  }
}

.#{$mslide-footer-wrapper} {
  width: 100%;
  display: flex;
  flex-direction: row;
  text-align: left;
  align-items: center;
  justify-content: flex-end;
  padding: space(xs) space(s) space(xs) 0;
  height: space(xl);
  .em-ds-button {
    margin-left: space(s);
  }
}

.#{$mslide-header} {
  padding: 0 space(s);
  display: flex;
  flex-direction: column;
  justify-content: center;

  .#{$mslide-title} {
    font-size: font-size(700);
    color: color(neutral, 700);
  }
}

.#{$mslide-wrapper} {
  .#{$modalContentWrapper} {
    flex: 1;
    padding: space(m) 0;
  }
  .#{$modal-title} {
    max-width: 80%;
    margin: 0 auto;
  }
}

.#{$prefix}-modal-v2 {
  .#{$mslide-content} {
    .em-ds-modal-v2__modal-wrapper {
      display: flex;
      flex-direction: column;
    }
    .em-ds-modal-v2__modal-footer {
      border-top: none;
    }
  }
}