/*!
 * 
 * Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
 * and/or its subsidiaries and/or its affiliates and/or their licensors.
 * 
 */
@import "../variables";
@import "../variables/modals_vars";
@import "../mixins";

.dlt-modal-window {
  @include component-vars(modals); //Mixin to define all the root variables
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 0;
  outline: 0;
  z-index: $modals-z-index;
  @include transition($modals-transition-time $modals-transition-effect); //Animation

  opacity: 0;
  visibility: hidden;

  &__open {
    opacity: 1;
    visibility: visible;

    .dlt-modal-window__backdrop {
      opacity: 1;
      visibility: visible;
    }

    .dlt-modal-window__container {
      opacity: 1;
      // transform: translate3d(0, 0, 0);
    }
  }

  &__container {
    background: $modals-color-background;
    position: absolute;
    padding: $modals-padding;
    transform: translate(0, 0);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto;
    max-height: $modals-max-height;
    width: 46%;
    z-index: $modals-container-z-index;
    opacity: 0;
    border-radius: $modals-border-radii;
    @include box-shadow($modals-elevation);

    //Animation
    // transform: translate3d(0, -24px, 0);
    transition-delay: $modals-transition-delay;
    @include transition($modals-transition-time $modals-transition-effect);

    //Media query
    @include media-breakpoint('sm') {
      width: 100%;
    }
  }

  @keyframes fadeIn {
    0% {
      transform: translate(0, 0);
    }

    30% {
      transform: translate(5px, 0);
    }

    55% {
      transform: translate(0, 0);
    }

    80% {
      transform: translate(5px, 0);
    }

    100% {
      transform: translate(0, 0);
    }
  }

  &__header,
  &__footer {
    flex-shrink: 0;
    position: relative;
  }

  &__title {
    font-size: $modals-title-font-size;
    font-weight: $modals-title-font-weight;
    line-height: $modals-title-line-height;
    margin-bottom: 0;
  }

  &__content {
    margin-top: $modals-content-margin-top;

    // overflow: hidden {
    //   y: auto;
    // }
    //Commented out because the select dropdown shadow is getting trimmed

    p:last-child {
      margin-bottom: 0;
    }
  }

  &__footer {
    margin-top: $modals-footer-margin-right;
    text-align: right;

    .dlt-button+.dlt-button {
      margin-left: $modals-footer-button-margin-left;
    }
  }

  &__close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    margin: 0;
    height: $modals-close-icon-size;
    width: $modals-close-icon-size;
    cursor: pointer;
    outline: 0;
    text-align: center;
    color: $modals-color-icon;

    .dlt-icon-close {
      font-size: $modals-close-icon-font-size;
      line-height: 1;
    }

  }

  &__backdrop {
    background: $modals-color-overlay;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 0;
    outline: 0;
    z-index: $modals-overlay-z-index;
    opacity: 0;
    visibility: hidden;

    //Animation
    @include transition($modals-transition-time $modals-transition-backdrop-effect);
    transition-delay: $modals-transition-backdrop-delay;
  }

  &__sm {
    .dlt-modal-window__container {
      width: $modals-width-sm;
    }
  }

  &__md {
    .dlt-modal-window__container {
      width: $modals-width-md;
    }
  }

  &__lg {
    .dlt-modal-window__container {
      width: $modals-width-lg;
    }
  }
}