// 
// @description : 
// @author      : Adarsh Pastakia
// @copyright   : 2016
// @license     : MIT

.ui-splash {
  background: #fff no-repeat center center;
  @include position(absolute);
  @if $splash-image {
    background-image: image-url($splash-image);
  }
}

.ui-viewport {
  overflow: hidden;
  @include flex-column();
  @include position(absolute, 0);
  @if $body-image {
    background-image: image-url($body-image);
  }

  .ui-app-header {
    z-index         : 5;
    min-height      : 2em;
    padding         : .25em .5em;
    @include flex(0 0 auto);
    @include flex-row($align: center, $wrap:false);

    color           : $app-header-text;
    background-color: $app-header-bg;
    border-bottom   : 1px solid rgba($wg-9,.25);

    a {
      color: $app-header-text;
    }

    .ui-app-logo {
      height: 32px;
      margin: 0 .5em;
    }

    .ui-app-title {
      font-size: 1.2em;
    }

    .ui-drawer-toggle {
      font-size: 1.25em;
      color    : $app-header-text;
    }

    .ui-divider {
      border-right: 1px solid $divider-hilight;
      border-left : 1px solid $divider-shadow;
      margin      : .5em .2em;
      @include transform(scaleX(.5));
      @include align-self(stretch);
    }
  }

  .ui-app-footer {
    z-index         : 5;
    font-size       : .5em;
    padding         : .25em 1em;
    @include flex(0 0 auto);
    @include flex-row($align: center, $justify:space-between);

    color           : $app-footer-text;
    background-color: $app-footer-bg;
  }

  .ui-router-view {
    overflow: hidden;
    position: relative;
    z-index : 0;
    @include flex(1 1 auto);
    @include flex-column();
  }

  .ui-loader {
    @include position(absolute, 0);
    background: rgba($base-bg, .15);
    cursor    : wait;
    direction : ltr;
    z-index   : $z-index-splash;

    .ui-loader-div {
      @include box-shadow(0 0 20px 0 $base-shadow-dark);
      @include position(absolute, 50% auto auto 50%);
      @include transform(translateX(-50%) translateY(-50%));

      background   : $base-bg;
      overflow     : hidden;
      padding      : .8em .5em;
      line-height  : 1;
      z-index      : $z-index-splash;
      border-radius: $base-border-radius;

      span:first-child {
        font-size: 2em;
        color    : $primary;
      }

      span:last-child {
        font-size  : 1.25em;
        margin-left: -5px;
        color      : $cg-8;
      }
    }
  }

  .ui-dialog-container {
    pointer-events: none;
    z-index       : $z-index-dialog;
    @include position(absolute, 0);

    &.ui-dragging {
      pointer-events: all;
    }
  }

  .ui-overlay-container {
    overflow      : hidden;
    padding       : 3em 0 1em;
    pointer-events: none;
    z-index       : $z-index-toast;
    @include position(absolute, 0);
    @include flex-column(flex-end, flex-start);
  }

  .ui-app-taskbar {
    border-top: 1px solid rgba($wg-9,.25);

    .ui-button {
      box-shadow: none;
      margin    : .2em .1em;
    }

    .ui-button.ui-active {
      background: $primary;
      color     : $primary-text;
      box-shadow: 0 0 3px 0 $base-shadow-dark inset;
    }
  }
}
@if $enable-blur {
  .ua-safari .ui-viewport .ui-loader-div {
    background-color: rgba($base-bg, .75);
    @include backdrop-blur(20px);
  }
}