@use '../auxiliary/variables' as var;
@use '../auxiliary/buttons';
@use '../auxiliary/icons';

$nap-dialog-overlay-backdrop-filter: blur(1px);
$nap-dialog-overlay-background: transparentize(darken(var.$nap-primary, 40), 0.6);
$nap-dialog-background: #fbfbfb;
$nap-dialog-box-shadow: 0 0 4px 1px transparentize(black, 0.75);
$nap-dialog-button-section: transparentize(#dee2e6, 0.8);
$nap-dialog-button-section-border: 1px solid transparentize(#989ea5, 0.8);

.ngx-awesome-popup-overlay.aw-dialog-modal {
  align-items: center;
  backdrop-filter: $nap-dialog-overlay-backdrop-filter;
  background: $nap-dialog-overlay-background;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999999999;

  .evolve-parent-dialog {
    background: $nap-dialog-background;
    box-shadow: $nap-dialog-box-shadow;
    box-sizing: content-box;
    opacity: 0;
    padding: 20px 20px 10px 20px;
    border-radius: 5px;
    border-top: 7px solid;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 100px);
    max-width: calc(100vw - 100px);

    position: relative;
    vertical-align: bottom;

    &.standard-dialog {
      border-color: transparent;
      padding: 17px 20px 10px 20px;
    }

    &.success-dialog {
      border-color: var.$nap-success;
    }

    &.info-dialog {
      border-color: var.$nap-info;
    }

    &.warning-dialog {
      border-color: var.$nap-warning;
    }

    &.danger-dialog {
      border-color: var.$nap-danger;
    }

    .ap-icon-success {
      color: lighten(var.$nap-success, 10%);
    }

    .ap-icon-info {
      color: lighten(var.$nap-info, 10%);
    }

    .ap-icon-warning {
      color: lighten(var.$nap-warning, 10%);
    }

    .ap-icon-danger {
      color: lighten(var.$nap-danger, 10%);
    }

    .text-wrapper-section {
      width: 100%;

      .text-wrapper {
        display: block;
        width: 100%;
        text-align: center;
      }

      .dont-break-out {
        hyphens: auto;
        overflow-wrap: break-word;
        white-space: pre-wrap;
        // word-break: break-all;
        word-wrap: break-word;
      }
    }

    .component-content {
      height: 100%;
      max-width: 95vw;
      transition-delay: 0.4s;
      transition-duration: 0.4s;
      transition-property: opacity;
      transition-timing-function: linear;
      width: 100%;
    }

    .component-content-loader-off {
      opacity: 1 !important;
      transition: none !important;
    }

    .component-content-preparing {
      opacity: 0;
      transition: none !important;
    }

    .component-content-ready {
      height: 100%;
      opacity: 1;
    }

    .dialog-loader {
      opacity: 1;
    }

    .dialog-loader-off {
      display: none;
      opacity: 0 !important;
    }

    .dialog-loader-gone {
      opacity: 0;
      pointer-events: none;
    }

    .dialog-loader-active {
      opacity: 1;
    }
  }

  .loader-holder {
    align-items: center;
    background: $nap-dialog-background;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    margin: -20px;
    opacity: 1;
    position: absolute;
    transition-delay: 0.4s;
    transition-duration: 0.4s;
    transition-property: opacity;
    transition-timing-function: linear;
    width: 100%;
  }

  .content-holder {
    display: flex;
    flex-direction: column;
    max-width: calc(100vw - 100px);
    overflow: auto;
  }

  .button-holder {
    display: flex;
    // height:          100%;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;

    .button-section {
      background: $nap-dialog-button-section;
      border-top: $nap-dialog-button-section-border;
      margin: 20px -20px -10px -20px;
      padding: 5px 20px;
    }
  }
}
