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

.ui-panel-group {
  > .ui-panel {
    border-radius      : 0;
    border-bottom-width: 0;

    &:first-child {
      border-top-left-radius : $base-border-radius;
      border-top-right-radius: $base-border-radius;
    }

    &:last-child {
      border-bottom-width       : 1px;
      border-bottom-left-radius : $base-border-radius;
      border-bottom-right-radius: $base-border-radius;
    }
  }
}

.ui-panel {
  overflow     : hidden;
  position     : relative;
  max-height   : 100vh;
  border       : 1px solid $base-border-color;
  border-radius: $base-border-radius;
  @include flexbox($direction: column, $align:stretch, $wrap: false);
  @include transition(max-height 0.5s);

  .ui-panel-body {
    position  : relative;
    background: $base-comp-bg-alt;
    @include flex(1 1 auto);

    &.ui-flexed {
      @include flexbox($direction: column);
    }
  }

  &.ui-collapse {
    .ui-header-button.ui-collapse .ui-icon {
      @include transform(rotate(-180deg));
    }

    max-height: 2.5em !important;
  }

  &.ui-expand {
    height    : auto !important;
    max-height: none !important;
    z-index   : $z-index-dialog;
    @include position(absolute, 0.5em);
  }
}

.ui-header {
  background   : $base-comp-bg;
  border-bottom: 1px solid rgba($base-border-color, .3);
  @include flex-auto();
  @include flexbox($direction: row,$align:center, $wrap:false);

  .ui-header-title {
    align-self: stretch;
    @include ellipsis();
    @include flex-fill();
    @include flexbox($direction: row,$align:center, $wrap:false);

    .ui-title-icon {
      align-self: stretch;
      padding   : 0.5em;
    }

    .ui-title {
      padding: 0.5em;
    }

    &.ui-icon-hilight {
      .ui-title-icon {
        background: rgba(darken($button-default-bg, 20%), .5);
      }
    }
  }

  .ui-header-tool {
    line-height: 1;

    &:last-child {
      @include margin(end, 0.5em);
    }
  }

  .ui-dropdown .ui-label span {
    line-height: 1.5;
  }

  .ui-header-button {
    color        : rgba($base-text, .7);
    background   : $base-comp-bg-alt;
    border-radius: $base-border-radius;
    border       : 1px solid rgba($base-border-color, .5);
    line-height  : 1.5;
    padding      : 0.25em 0.5em;
    margin       : 0 0.25em;

    .ui-icon {
      @include transition(transform 0.5s);
      @include transform-origin(50% 50% 0);
    }

    &:disabled {
      opacity       : 0.5;
      pointer-events: none;
      background    : rgba($dark, .25);
    }

    &:hover {
      color       : rgba($base-text, .9);
      border-color: rgba($base-border-color, .75);
    }

    &:active {
      background: rgba($dark, .1);
    }
  }
}
@include header-theme(dark, $dark);
@include header-theme(muted, $muted);
@include header-theme(primary, $primary);
@include header-theme(secondary, $secondary);
@include header-theme(info, $info);
@include header-theme(danger, $danger);
@include header-theme(success, $success);
@include header-theme(warning, $warning);