@import "./../variables";

.grid-dialog-header {
  display: grid;
  grid-gap: 0.5rem;
  grid-template-areas: "icon title close";
  grid-template-columns: auto 1fr auto;
  align-items: center;
  &__icon {
    grid-area: icon;
  }
  &__title {
    grid-area: title;
  }
  &__close {
    grid-area: close;
    text-align: end;
  }
  &__icon,
  &__title,
  &__close {
    display: flex;
    align-items: center;
  }
}

.grid-dialog-footer {
  display: grid;
  align-items: center;
  justify-content: space-between;
  grid-template-columns: 1fr 1fr;

  &__left {
    text-align: left;
  }

  &__right {
    text-align: right;
  }
}

ux-dialog {
  padding: 0;
  &-overlay {
    bottom: 0;
    left: 0;
    position: fixed;
    top: 0;
    right: 0;
  }

  &-container {
    display: block;
    transition: all 0.4s ease-out;
    overflow: hidde;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    > div {
      width: 100%;
      height: 100%;
      > div {
        height: 100%;
      }
    }
  }

  & {
    width: 80%;
    display: table;
    border-radius: 5px;
    margin: auto;
    border: none;

    > ux-dialog-header {
      padding: 20px 15px 20px 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: solid 5px var(--primary, $primary);
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;
      border-bottom: none;
      button.dialog-close {
        display: none;
      }
      h5 {
        margin: 0;
      }

      .dialog-header-content {
        width: 100%;
        .grid-dialog-header {
          .grid-dialog-header__icon {
            color: var(--primary, $primary);
          }
          .grid-dialog-header__title > h5 {
            font-size: 1.5em;
          }
          .grid-dialog-header__title > h5 {
            margin: 0;
          }
          .grid-dialog-header__close {
            .ui-btn__icon {
              padding: 0;
              .ui-icon {
                font-size: 1.5em;
              }
            }
          }
        }
      }
    }

    > ux-dialog-body {
      display: block;
      padding: 0px 15px;
      flex-grow: 1;
      overflow: auto;
      min-height: 2em;
      margin: 20px 0;
      margin-top: 8px;
      > .row {
        margin: 0;
        > .col {
          padding: 0;
        }
      }
      > .dialog-box-message {
        ul {
          overflow-y: scroll;
          height: 200px;
          margin-bottom: 0;
        }
      }
    }

    > ux-dialog-footer {
      display: block;
      flex-shrink: 0;
      width: 100%;
      text-align: right;
      background-color: $background-dialog-footer;
      border-bottom-left-radius: 5px;
      padding: 10px 15px;
      border-bottom-right-radius: 5px;
    }
  }

  &.warningBox {
    ux-dialog-header {
      border-top: solid 5px $warning;
      .dialog-header-content > .grid-dialog-header > .grid-dialog-header__icon {
        color: $warning;
      }
    }
    ux-dialog-footer {
      ui-button.ui-theme--primary[data-type="solid"]:last-child {
        background-color: $warning;
        &:hover {
          background-color: mix($warning, $white, 75%);
        }
      }
    }
    ::-webkit-scrollbar-thumb {
      background-color: mix($warning, $white, 50%);
      &:hover {
        background-color: $warning;
      }
    }
  }

  &.questionBox, 
  &.notificationBox {
    ux-dialog-header {
      border-top: solid 5px var(--primary, $primary);
      .dialog-header-content > .grid-dialog-header > .grid-dialog-header__icon {
        color: var(--primary, $primary);
      }
    }
    ux-dialog-footer {
      ui-button.ui-theme--primary[data-type="solid"]:last-child {
        background-color: var(--primary, $primary);
        &:hover {
          background-color: var(--primary-white-75, mix($primary, $white, 75%));
        }
      }
    }
    ::-webkit-scrollbar-thumb {
      background-color: var(--primary-white-50, mix($primary, $white, 50%));
      &:hover {
        background-color: var(--primary, $primary);
      }
    }
  }

  ux-dialog-header {
    .dialog-header-content > .grid-dialog-header {
      .grid-dialog-header {
        &__icon {
          color: var(--ux-dialog-color-header, $ux-dialog-color-header);
        }
        &__close {
          color: var(--ux-dialog-color-header, $ux-dialog-color-header);
          &:hover {
            color: $ux-dialog-color-header-hover;
          }
          ui-button {
            color: inherit;
          }
        }
      }
    }
  }

  &.editDialog {
    ux-dialog-header {
      border-top: none;
      .dialog-header-content > .grid-dialog-header {
        .grid-dialog-header {
          &__icon {
            color: var(--ux-dialog-color-header, $ux-dialog-color-header);
          }
          &__close {
            color: var(--ux-dialog-color-header, $ux-dialog-color-header);
            &:hover {
              color: $ux-dialog-color-header-hover;
            }
            ui-button {
              color: inherit;
            }
          }
        }
      }
    }
  }

  &.errorBox {
    ux-dialog-header {
      border-top: solid 5px $danger;
      .dialog-header-content > .grid-dialog-header > .grid-dialog-header__icon {
        color: $danger;
      }
    }
    ux-dialog-footer {
      ui-button.ui-theme--primary[data-type="solid"]:last-child {
        background-color: $danger;
        &:hover {
          background-color: mix($danger, $white, 75%);
        }
      }
    }
    ::-webkit-scrollbar-thumb {
      background-color: mix($danger, $white, 50%);
      &:hover {
        background-color: $danger;
      }
    }
  }

  &.editBox,
  &.questionBox,
  &.notificationBox,
  &.warningBox,
  &.errorBox {
    margin-top: 8vh;
    > ux-dialog-header {
      button.dialog-close {
        display: none;
      }
    }
  }

  &.editDialog {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 0;
    position: absolute;
    right: 0;
    width: 75%;

    &.ui-dialog {
      &-right {
        left: auto;
        right: 0;
      }
      &-left {
        left: 0;
        right: auto;
      }
      &-sm {
        width: 30%;
      }
      &-md {
        width: 50%;
      }
      &-lg {
        width: 75%;
      }
      &-xl {
        width: 90%;
      }
      &-all {
        --left-width: #{$left-part-width};
        width: calc(100% - var(--left-width));
      }
    }

    @media only screen and (max-width: $breakpoints-xl) {
      &.ui-dialog {
        &-sm {
          width: 50%;
        }
        &-md {
          width: 75%;
        }
        &-lg,
        &-xl,
        &-all {
          width: 95%;
        }
      }
    }
    @media only screen and (max-width: $breakpoints-md) {
      &.ui-dialog {
        &-sm {
          width: 75%;
        }
        &-md,
        &-lg,
        &-xl,
        &-all {
          width: 95%;
        }
      }
    }
    @media only screen and (max-width: $breakpoints-sm) {
      &.ui-dialog {
        &-sm,
        &-md,
        &-lg,
        &-xl,
        &-all {
          width: 95%;
        }
      }
    }
  }
}

body.condensed {
  ux-dialog.editDialog.ui-dialog-all {
    --left-width-condensed: #{$left-part-condensed-width};
    width: calc(100% - var(--left-width-condensed));
  }
}

.editBox,
.questionBox,
.notificationBox,
.warningBox,
.errorBox {
  min-width: 500px;
  max-width: 500px;

  & .modal-body {
    & .message {
      vertical-align: top;
      float: right;
      display: table-cell;
    }

    & div {
      margin-top: 5px;
      display: table;
      & i {
        font-size: 20px;
        font-style: normal;
        padding-right: 5px;
        display: table-cell;
        vertical-align: baseline;
      }
    }
  }
}
