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

.ui-app-taskbar {
  border-top      : 1px solid rgba($base-shadow-color, .3);
  background-color: shade($base-bg, 1%);
  @include flex-row($wrap: false);

  .ui-app-taskbar-tools {
    @include flex-auto();
  }

  .ui-taskbutton-wrapper {
    @include flex-row();
    @include flex-fill();

    > button {
      background: none;
      color     : $dark;
      margin    : 0.05rem;
      font-size : 0.8rem;
      max-width : 8rem;
      border    : 1px solid shade($base-bg, 10%);
      @include ellipsis();

      span {
        pointer-events: none;
      }

      .ui-icon {
        margin: 0 0.25em;
      }

      &:hover {
        background: rgba($secondary, .2);
      }

      &.ui-active {
        color     : $white;
        background: rgba($secondary, .8);
      }
    }
  }
}

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

  .ui-dialog-wrapper {
    @include position(absolute,0);

    &.ui-modal {
      pointer-events: all;
      padding       : 0.5em;
      z-index       : $z-index-dialog+10;
      background    : rgba(0,0,0,.05);
      @include flex-column(center, center);

      > .ui-dialog {
        top : 0 !important;
        left: 0 !important;
      }
    }

    &:not(.ui-modal) {
      padding: 0.5em 0.5em 3em;
    }

    .ui-dialog {
      pointer-events: all;
      position      : relative;
      background    : $base-bg;
      z-index       : $z-index-dialog;
      border-radius : $base-border-radius;
      box-shadow    : 0 0 30px 0 rgba(0,0,0,.15);
      @include transition(all .25s);
      @include flex-column($align: stretch, $justify : flex-start);

      .ui-header {
        z-index                : 5;
        border-top-left-radius : $base-border-radius;
        border-top-right-radius: $base-border-radius;

        .ui-header-button {
          font-size: 0.8rem;
        }
      }

      > :last-child {
        border-bottom-left-radius : $base-border-radius;
        border-bottom-right-radius: $base-border-radius;
      }

      .ui-sidebar:not(.ui-collapse) {
        max-width: $sidebar-width * 0.75;
      }

      .ui-resizer {
        position      : absolute;
        z-index       : 10;
        bottom        : 0;
        line-height   : 1;
        opacity       : 0.3 !important;
        pointer-events: all !important;

        &:active,
        &:hover {
          opacity: 0.6 !important;
        }
      }

      &.ui-maximize {
        top   : 0 !important;
        left  : 0 !important;
        right : 0 !important;
        width : 100% !important;
        height: 100% !important;
        @include transform(translateY(0%));

        .ui-resizer {
          display: none;
        }
      }

      &.ui-minimize {
        min-height: 0 !important;
        min-width : 0 !important;
        height    : 2rem !important;
        width     : 10em !important;
        margin-top: 100% !important;

        > :not(.ui-header) {
          visibility: hidden;
        }
      }

      &.ui-active {
        z-index   : 5;
        box-shadow: 0 0 0 1px $base-bg, 0 0 30px 5px rgba(0,0,0,.2);
      }

      &.ui-inactive {
        z-index: 1;

        > .ui-header {
          opacity: 0.75;
        }

        > :not(.ui-header) {
          opacity: 0.85;
        }
      }

      &.ui-dragging {
        @include transition(none);
        background: rgba($base-bg,.95);

        > :not(.ui-header) {
          opacity: 0.3;
        }
      }
    }
  }
}

.ltr,
[dir="ltr"] {
  .ui-dialog .ui-resizer {
    right : 0;
    cursor: nwse-resize;
  }

  .ui-dialog {
    right: auto !important;
  }
}

.rtl,
[dir="rtl"] {
  .ui-dialog .ui-resizer {
    left  : 0;
    cursor: nesw-resize;
    @include transform(scaleX(-1));
  }

  .ui-dialog {
    left: auto !important;
  }
}