// @author    : Adarsh Pastakia
// @version   : 5.0.0
// @copyright : 2019
// @license   : MIT

.ui-viewport {
  display: grid;
  grid-template-areas: "app-header" "app-menu" "app-body" "app-taskbar" "app-footer";
  grid-template-rows: auto auto 1fr auto auto;
  height: 100vh;
  overflow: hidden;
  width: 100vw;

  &__header {
    grid-area: app-header;
  }

  &__body {
    display: grid;
    grid-area: app-body;
    grid-template-areas: "content";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    overflow: hidden;
    position: relative;
  }

  &__footer {
    grid-area: app-footer;
    margin-top: $base-spacing * -0.5;
  }

  &__taskbar {
    display: grid;
    grid-area: app-taskbar;
    grid-template-columns: auto 1fr auto;

    &__wrapper {
      display: grid;
      grid-auto-columns: minmax(2rem, 8rem);
      grid-auto-flow: column;
      overflow: hidden;
    }
  }

  &__alert-container,
  &__toast-container,
  &__dialog-container {
    @include position(absolute, $base-spacing/2);
    pointer-events: none;
    z-index: 100;

    > .ui-toast,
    > .ui-dialog__shim {
      pointer-events: all;
    }
  }

  &__alert-container {
    align-items: center;
    display: flex;
    flex-flow: column-reverse nowrap;
    justify-content: flex-end;
  }

  &__toast-container {
    align-items: flex-end;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
  }

  &__floating-container {
    @include enable-gpu();
    @include position(fixed, 0);
    pointer-events: none;
    z-index: 200;

    > div:not(.ui-tooltip) {
      height: 100vh;
      pointer-events: all;
      width: 100vw;
    }

    > .ui-drop {
      @include position(absolute, 0);
    }
  }
}

.ui-router-view {
  display: grid;
  grid-area: content;
  grid-template-areas: "content";
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  overflow: hidden;
}

.ui-icon {
  background-size: contain;
  box-sizing: content-box;
  display: inline-block;
  fill: currentColor;
  font-size: 1em;
  height: 1em;
  line-height: 1;
  pointer-events: none;
  text-align: center;
  vertical-align: middle;
  width: 1em;

  img {
    background-size: contain;
    height: 1em;
    overflow: hidden;
    width: 1em;
  }

  path,
  ::before {
    @include transform-origin(50% 50% 0);
  }

  &--round {
    border-radius: 1em;
    height: 1em;
    max-height: 1em;
    overflow: hidden;
    width: 1em;
  }

  &.flip-on-rtl {
    @at-root [dir="rtl"] & {
      transform: scaleX(-1);
    }
  }
}

.ui-loader {
  cursor: wait;
  display: block;
  z-index: 99999;
  @include position(absolute, 0);

  > div {
    border-radius: 2px;
    font-size: 2rem;
    height: 3rem;
    line-height: 0;
    margin: auto;
    padding: 0.5rem;
    width: 3rem;
    @include position(absolute, 0);
  }
}

.ui-drop {
  display: none;

  &__body {
    @include position(fixed, 0 null null 0);
    cursor: default;
    max-height: 40vh;
    max-width: 50vw;
    min-width: 4rem;
    overflow: auto;
    pointer-events: all;
    transform: translate(0, 0);
    z-index: 500;

    &[data-show="false"] {
      visibility: hidden;
    }
  }

  &[data-open="true"] {
    display: block;
  }
}
