/* ==========================================================================
   DIALOG
   ========================================================================== */

/**
 * Name: .slab-dialog
 *
 * Displays a Dialog to contain any kind of content. It could be displayed as
 * a full-size screen or using custom width/height properties.
 *
 *
 * Markup:
 *
 *   <div class="slab-dialog-overlay">
 *     <div class="slab-dialog">
 *       <div class="slab-dialog-content">
 *         <div>
 *
 *         </div>
 *       </div>
 *     </div>
 *   </div>
 *
 */

$content-border-width: 4px;
$slab-button-size: 35px !default;
$slab-button-fontsize: 25px !default;


@import '~@angular/cdk/overlay-prebuilt.css';

.cdk-overlay-dark-backdrop {
  backdrop-filter: saturate(30%);
  transition: all .3s !important;
}

.cdk-overlay-pane {
  background-color: var(--slab_background_primary);
  box-shadow: 0 0 30px rgba(0, 0, 0, .2);
  border-radius: 7px;
  overflow: hidden;
  transition: all .5s;


  .slab-dialog-bottom {
    padding: 16px 24px;

    .btn {
      height: $slab-button-size;
    }
  }

  &.slab-toast-panel {
    border: none;
    background: transparent;
    border-radius: 30px;
  }

  &:not(.fullscreen) {
    animation: scaleUp .2s;
  }

  // avoid animation in firefox because it produces an unpleasant flickering effect
  @-moz-document url-prefix() {
    &:not(.fullscreen) {
      animation: none;
    }
  }

  &.fullscreen {
    border: 0;
    border-radius: 0;

    .slab-dialog-bottom {
      background: none;
      padding: 16px 24px;


      .btn {
        height: $slab-button-size;
      }
    }

    .slab-dialog-header {
      background: $slab-dialog-fullscreen-header-color;
    }
  }

  & > *:first-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
  }
}


/**
 * 1. Full-screen by default.
 * 2. Preventively hide the 'back' side of a transformed elemenet.
 */
.slab-dialog {
  @include size(100%); /* [1] */

  > * {
    -webkit-backface-visibility: hidden; /* [2] */
  }
}

.slab-dialog-disabled {
  pointer-events: none !important;

  .form-control {
    @extend .form-control, :disabled;
  }

  input[type="radio"] + label {
    @extend .disabled;
  }

  input[type="text"] {
    @extend .disabled;
  }

  input[type="input"] {
    @extend .disabled;
  }


  input[type="checkbox"]:not(.slab-checkbox-not-show) + label {
    @extend .disabled;
  }

  .slab-switch {
    @extend .disabled;
  }

  .slab-combobox {
    @extend .disabled;
  }


  .slab-dialog-header {
    pointer-events: auto;
  }

  .p-inputtext {
    @extend .disabled;
    background-color: #f4f5f7;
  }

  button {
    @extend .disabled;
  }

}

/**
 * 1. We use !important because it needs to override the default `display:block`
 *    from the dialog component.
 * 2. Is there a better way to target wrappers such as grid-options-dialog{} ?
 * 3. Required to position the top buttons. This could be refactored but then
 *    we'd need to tweak all the dialogs and place top buttons in the header.
 */
.slab-dialog-content {
  @include size(100%);
  display: flex !important; /* [1] */

  border: none;
  border-radius: 0;
  background-color: var(--slab_background_primary);

  & > *:first-child { /* [2] */
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative; /* [3] */
    width: 100%;

  }
}

@-moz-document url-prefix() {
  .slab-dialog-content {
    & > *:first-child { /* [2] */
      flex: 1;
      display: flex;
      flex-direction: column;
      position: relative; /* [3] */
      overflow: hidden;
    }
  }
}

.slab-dialog-header {
  display: flex;
  align-items: center;
  height: $slab-dialog-header-height;
  padding: 16px 24px;

  font-size: 20px;
  border-radius: 0;

  background: var(--slab_modal_header_background);
  border-bottom: 1px solid var(--slab_table_border_color);
}


.slab-dialog-bottom {

  border-top: 1px solid var(--slab_table_border_color);
  background: none !important;
  padding: 16px 24px;

  .square {
    @include size($slab-button-size);

    min-width: $slab-button-size; /* [1] */
    min-height: $slab-button-size; /* [1] */
    line-height: 1;
    padding: 0;
  }

  .btn {
    min-width: $slab-minimum-button-width;
  }

}

.slab-dialog-header-button {
  @include size($slab-button-size);
  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  text-align: center;
  border-radius: 20px;
  border: 1px solid var(--primary);

  i,
  &:before {
    @include font-smoothing(antialiased);
    color: var(--text-color);
    font-size: $slab-button-fontsize;
    font-family: icomoon;
  }

  &:hover {
    background-color: var(--primary);
  }
}

.slab-dialog-close {
  &::before {
    content: "\F00D";
  }
}

.slab-dialog-info {
  &::before {
    content: "\F05A";
  }
}

.slab-dialog-home {
  &::before {
    content: "\F015";
  }
}

.slab-dialog-minimize {
  &::before {
    content: "\F2D1";
    font-size: 16px;
  }
}

.slab-dialog-close,
.slab-dialog-info,
.slab-dialog-home,
.slab-dialog-minimize {
  &:hover {
    &::before {
      color: var(--text-color-secondary);
    }
  }
}

/* Style modifies.
   ========================================================================== */

.slab-dialog {
  &.slab-dialog-border { /* [3] */
    .slab-dialog-content {
      border: $content-border-width solid $slab-dialog-border-color;
      border-radius: $content-border-width;

      .slab-dialog-header {
        border-radius: $content-border-width $content-border-width 0 0;
      }

      .slab-dialog-bottom {
        border-radius: 0 0 $content-border-width $content-border-width;
        background: var(--slab_background_primary);

        .btn {
          height: $slab-button-size;
        }
      }
    }
  }

  :not(slab-dialog-border) {
    .slab-dialog-content,
    .slab-dialog-header,
    .slab-dialog-bottom {
      border-radius: 0;
    }

    .slab-dialog-content {
      border: none;
    }

    .slab-dialog-bottom {
      .btn {
        height: $slab-button-size;
      }
    }
  }
}


/* Context Modal styles
   ========================================================================== */
.slab-context-modal {
  .slab-dialog-header {
    &:after {
      bottom: 100% !important;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }

    &:after {
      border-bottom-color: lightgray;
      border-width: 20px !important;
      margin-left: -30px !important;
    }
  }
}

.slab-context-modal-arrow-center {
  .slab-dialog-header {
    &:after {
      left: 50%;
    }
  }
}

.slab-context-modal-arrow-right {
  .slab-dialog-header {
    &:after {
      right: 5%;
    }
  }
}

.slab-context-modal-arrow-left {
  .slab-dialog-header {
    &:after {
      left: 5%;
    }
  }
}


/* Animations
  ========================================================================== */
@keyframes scaleUp {
  0% {
    transform: scale(.8) translateY(1000px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
  }
}


/* Header progress bar
  ========================================================================== */

.slab-dialog-header-progress {
  width: 100%;
  height: $slab-nanobar-height;
  z-index: 9998;
  top: 0;

  .slab-dialog-header-progress-bar {
    width: 0;
    height: 100%;
    transition: width 0.3s;
    background: $slab-nanobar-color;
    z-index: 9998;
  }
}

.slab-dialog-header-progress-bar-with-text {
  height: $slab-nanobar-with-progress-height;
  position: relative;
  background-color: #e9ecef;

  .slab-dialog-header-progress-bar {
    position: absolute;
    z-index: 1;
    height: 100%;
    top: 0;
  }

  .slab-dialog-header-progress-bar-text {
    position: absolute;
    width: 100%;
    z-index: 2;
    padding-top: 3px;
  }
}