$base: #{$prefix}-modal-v2;
$header: #{$base}__modal-header;
$header-decision: #{$header}--decision;
$header-selection: #{$header}--selection;
$header-right: #{$base}__modal-header-close;
$header-right-form: #{$base}__modal-header-close--form;
$overlay: #{$base}-overlay;
$overlay-center: #{$base}--center;
$overlay-top: #{$base}--top;

.#{$base} {
  position: relative;
  display: flex;
  flex-direction: column;
  width: auto;
  pointer-events: auto;
  background-color: color(neutral, 000);
  background-clip: padding-box;
  min-width: 300px;
  box-shadow: 0 10px 20px 0 #697489;
  margin: 24px;
  left: calc(50% - 24px);
  transform: translateX(-50%);

  &:focus {
    outline: none;
  }
  max-width: space(xxl) * 9;

  &.#{$base}-type-information,
  &.#{$base}-type-decision,
  &.#{$base}-type-form {
    max-width: space(xxl) * 6.1;
  }
}

// header
.#{$header-decision} {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  padding-right: space(s);
}

.#{$header} {
  height: space(m);
  &--with-close {
    height: space(xl);
  }
}

.#{$header-selection} {
  height: space(xl);
  // background: color(neutral, 050);
  display: flex;
  align-items: flex-start;
  border-bottom: $border-style color(neutral, 080);
  padding-top: 10px;
  padding-left: space(s);
  padding-right: space(s);
  flex: 0 0 auto;
  width: calc(100% - 1px);
  .#{$header-right} {
    background: color(neutral, 0);
    margin-left: auto;
  }
  .#{$header-right-form} {
    background: none;
    height: calc(#{space(m)} * 1.16);
    align-items: center;
    display: flex;
  }
}

body.ReactModal__Body--open {
  overflow: hidden;
}

.#{$overlay} {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  outline: 0;
  background-color: rgba(37, 41, 47, 0.5);
  overflow: auto;
  @include transition(duration(slower) easing(out));

  &[class*='after-open'] {
    opacity: 1;
  }

  &[class*='before-close'] {
    opacity: 0;
  }

  &.#{$overlay-top} {
    .#{$base} {
      margin-top: 20vh;
    }
  }

  &.#{$overlay-center} {
    display: flex;
    align-items: center;
  }
}

// ********************************************
// modifiers
$el-size-xsmall: #{$base}--x-small;
$el-size-small: #{$base}--small;
$el-size-medium: #{$base}--medium;
$el-size-large: #{$base}--large;
$el-size-xlarge: #{$base}--x-large;
$el-size-xxlarge: #{$base}--xx-large;
$el-fluid-actions: #{$base}--fluid-actions;
$el-loading-actions: #{$base}--loading;
$el-center: #{$base}--center;

.#{$base}.#{$el-size-small} {
  max-width: 320px;
  width: 100%;
}

.#{$base}.#{$el-size-medium} {
  max-width: 656px;
  width: 100%;
}

.#{$base}.#{$el-size-large} {
  max-width: 848px;
  width: 100%;
}

.#{$base}.#{$el-size-xlarge} {
  max-width: 1024px;
  width: 100%;
}

.#{$base}.#{$el-size-xxlarge} {
  max-width: 1600px;
  width: calc(100% - 48px);
}

// ********************************************
// feedback
$feedback: #{$base}__modal-feedback;
$feedback-icon: #{$prefix}-icon;

.#{$feedback} {
  text-align: center;
  padding-bottom: space(s);

  .#{$feedback-icon} {
    height: space(xxl);
    width: space(xxl);
  }

  &--information {
    .#{$icon-selector} {
      svg,
      svg:not([fill]) {
        @include icon-color(color(brand-primary, 700));
      }
    }
  }

  &--warning {
    .#{$icon-selector} {
      svg,
      svg:not([fill]) {
        @include icon-color(color(warning, 600));
      }
    }
  }

  &--error {
    .#{$icon-selector} {
      svg,
      svg:not([fill]) {
        @include icon-color(color(danger, 900));
      }
    }
  }

  &--success {
    .#{$icon-selector} {
      svg,
      svg:not([fill]) {
        @include icon-color(color(success, 900));
      }
    }
  }
}

// types
$type-information: #{$base}-type-information;
$type-decision: #{$base}-type-decision;
$type-selection: #{$base}-type-selection;
$type-form: #{$base}-type-form;

.#{$type-information},
.#{$type-decision} {
  text-align: center;
}

// title
$title: #{$base}__modal-title;
.#{$title} {
  @include h3-text-style();
  color: color(neutral, 700);
  word-break: break-word;
  padding-bottom: space(s);
  padding-right: space(s);
  margin: 0;

  &--information,
  &--decision {
    padding: 0 space(s) space(s) space(s);
  }

  &--selection {
    padding-bottom: 0;
    line-height: calc(#{space(m)} * 1.16);
  }

  &--form {
    padding-bottom: 0;
    line-height: calc(#{space(m)} * 1.16);
  }
}

// content
$content: #{$base}__modal-content;
.#{$content} {
  overflow-y: auto;
  // 100vh minus 20vh from margin top and minus
  // bottom margin, footer and header
  max-height: calc(80vh - 133px);
  font-size: font-size(300);
  color: color(neutral, 700);
  @include body-text-style();
  &--information {
    padding-left: space(xl);
    padding-right: space(xl);
    padding-bottom: space(l);
  }
  &--decision {
    padding-left: space(m);
    padding-right: space(m);
    padding-bottom: space(s);
  }

  &--selection,
  &--form {
    padding-left: space(s);
    padding-right: space(s);
  }
  &--form {
    padding-top: space(s);
  }
  &--remove-padding {
    padding: 0;
  }
  .em-ds-data-grid-body__row:last-child {
    margin-bottom: 0;
  }
}

// footer
$footer: #{$base}__modal-footer;

.#{$footer} {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: $border-style color(neutral, 080);
  padding: space(s);
  flex: 0 0 auto;

  &-actions {
    display: flex;

    .action-reject,
    .action-confirm {
      margin-left: space(xs);
    }
  }
}