// ********************************************
// container definition
$el-container: #{$prefix}-modal;
$el-overlay: #{$el-container}-overlay;
$el-content: #{$el-container}-content;
$el-header: #{$el-container}-modal-header;
$el-footer: #{$el-container}-modal-footer;
$el-actions: #{$el-container}-modal-footer-actions;


// ********************************************
// elements
$el-header-title: #{$el-header}__title;
$el-header-icon: #{$el-header}__icon;
$el-body: #{$el-container}__body;
$el-body-wrapper: #{$el-container}__body-wrapper;
$el-footer-btn: #{$el-container}__button-action;


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

// ********************************************
// Vars
$modal-body-min-height: 96px; // from Spec
$border-style:solid 1px;  // from Spec
$modal-margin: space(m) auto;



// ********************************************
// Basic
body.ReactModal__Body--open {
  overflow: hidden;
}

.#{$el-overlay} {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  outline: 0;
  background-color: rgba(color(neutral, 800), 0.5); // TO BE DEFINED
  overflow: auto;
  @include transition(duration(slower) easing(out));

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

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

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

.#{$el-container}{
  //@include transition(duration(slower) easing(out));
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: color(neutral, 000);
  background-clip: padding-box;
  min-width: space(xxl) * 2;
  &:focus{
    outline: none;
  }
}


.#{$el-size-xsmall}{
  max-width: space(xxl) * 5;
  margin: $modal-margin;
}

.#{$el-size-small}{
  max-width: space(xxl) * 7.5;
  margin: $modal-margin;
}

.#{$el-size-medium}{
  max-width: space(xxl) * 9;
  margin: $modal-margin;
}

.#{$el-size-large}{
  max-width: space(xxl) * 12;
  margin: $modal-margin;
}

.#{$el-size-xlarge}{
  max-width: space(xxl) * 16;
  margin: $modal-margin;
}

// ********************************************
// HEADER
.#{$el-header}{
  background: color(neutral, 050);
  display: flex;
  align-items: flex-start;
  border-bottom: $border-style color(neutral, 080);
  padding: space(s);
  flex: 0 0 auto;
}
.#{$el-header-title}{
  @include h3-text-style();
  color: color(neutral, 700);
  word-break: break-word;
}

.#{$el-header-icon} {
  cursor: pointer;
  margin-left: auto;
  padding-left: space(s);
}

// ********************************************
// BODY
.#{$el-body} {
  padding: space(m);
  flex: 1 1 auto;
}

.#{$el-body-wrapper} {
  padding-bottom: space(s);
  overflow-y: hidden;
  overflow-x: auto;
  word-break: break-word;
}


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

.#{$el-actions} {
  display: flex;
}

.#{$el-footer-btn} {
  margin-left: space(s);
}
.#{$el-fluid-actions} {

  .#{$el-actions} {
    flex-direction: column;
    flex:1;
  }

  .#{$el-footer-btn} {
    margin-left: 0;
    width: 100%;
  }
}

// .#{$el-loading-actions} {

//   .#{$el-footer-btn} {
//     opacity: 0;
//   }
// }


@import './ModalFeedBack/ModalFeedBack';