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

.ui-tab-panel {
  @include flex-fill();
  @include flexbox($direction: column,$align:stretch, $wrap:false);
  overflow: hidden;

  .ui-tab-panel-body {
    border  : 1px solid $base-border-color;
    position: relative;
    overflow: hidden;
    @include flex-fill();
    @include flexbox($direction: column,$align:stretch, $wrap:false);

    > compose {
      @include flex-fill();
      @include flexbox($direction: column,$align:stretch, $wrap:false);
    }
  }

  .ui-tabbar {
    min-height: 2em;
    @include flex-auto();
    @include flexbox($direction: row,$align:stretch, $wrap:false);

    > .ui-tabbar-overflow {
      display: none;

      &.ui-open {
        display: block;
      }

      > .ui-tab-button {
        border       : none;
        border-radius: 0;
        padding      : 0.25em 0.5em;
        margin       : 0 !important;
        border-bottom: 1px solid rgba($base-border-color,.25);

        &.ui-active {
          box-shadow: 4px 0 0 0 $tab-active-text inset;
        }

        &:hover {
          box-shadow: 4px 0 0 0 rgba($tab-active-text, .5) inset;
        }
      }
    }

    > .ui-tabbar-links {
      @include flex-auto();
      @include flexbox($direction: row,$align:center, $wrap:false);
    }

    > .ui-tabbar-buttons {
      position     : relative;
      overflow     : hidden;
      margin-bottom: -1px;
      @include flex-fill();
      @include flexbox($direction: row,$align:stretch, $wrap:false);
    }

    .ui-tab-button {
      @include flex-auto();
      @include flexbox($direction: row,$align:center, $wrap:false);
      position               : relative;
      z-index                : 2;
      line-height            : 2;
      padding                : 0 0.5em;
      min-width              : 6em;
      margin                 : 4px 2px -1px;
      overflow               : hidden;
      border                 : 1px solid $base-border-color;
      border-bottom-width    : 0;
      border-top-left-radius : $base-border-radius;
      border-top-right-radius: $base-border-radius;

      > div {
        @include flex-fill();
        @include flexbox($direction: row,$align:center, $justify:center);

        .ui-tab-icon ~ .ui-label {
          padding       : 0 0.5em;
          pointer-events: none;
        }

        .ui-label {
          @include ellipsis();
          max-width     : 8em;
          pointer-events: none;
        }
      }

      &.ui-disabled {
        pointer-events: none;
        color         : $muted;
        opacity       : 0.5;
      }

      &:after {
        display   : block;
        content   : '';
        bottom    : 0;
        z-index   : 5;
        left      : 50%;
        right     : 50%;
        position  : absolute;
        height    : 0;
        margin    : 0 auto;
        background: $tab-active-text;
        @include transition(all 0.25s);
      }

      &:hover {
        // margin-top: 2px;

        &:after {
          height: 2px;
          left  : 0;
          right : 0;
        }
      }

      &.ui-active {
        // margin-top   : 0;
        font-weight: 600;
        color      : $tab-active-text;
        background : $tab-active-bg;

        &:after {
          height    : 0;
          top       : 0;
          bottom    : auto;
          left      : 0;
          right     : 0;
          box-shadow: 0 0 2em 1px $tab-active-text;
        }
      }

      .ui-close {
        opacity: 0.7;

        &:hover {
          opacity: 1;
        }
      }
    }

    .ui-tabbar-toggle {
      cursor    : pointer;
      color     : $menu-link-text;
      align-self: stretch;
      min-width : 2em !important;

      &:hover {
        box-shadow: none;
        background: $menu-link-hover-bg;
        color     : $menu-link-hover-text;
      }
    }

  }

  .ui-tab {
    z-index   : 5;
    background: $tab-body-bg;
    @include flex-fill();
    @include position(absolute, 0);
    @include transition(all 0.5s);

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

      > compose {
        @include flexbox($direction: column);
        @include flex-fill();
      }
    }

    &:not(.ui-active) {
      // display: none;
      opacity: 0;
      z-index: 1;
      @include transform(translateX(-100%));
    }

    &:not(.ui-scroll) {
      overflow: hidden;
    }
  }

  &.ui-noborder .ui-tab-panel-body {
    border: none;
  }

  &.ui-noborder:not(.ui-bottom) .ui-tab-bar {
    border-bottom: 1px solid $base-border-color;
  }

  &.ui-noborder.ui-bottom .ui-tab-bar {
    border-top: 1px solid $base-border-color;
  }

  &.ui-bottom {
    flex-direction: column-reverse;

    .ui-tabbar {
      .ui-tabbar-buttons {
        margin-top   : -1px;
        margin-bottom: 0;
      }

      .ui-tab-button {
        margin                    : -1px 2px 4px;
        border-top-width          : 0;
        border-bottom-width       : 1px;
        border-radius             : 0;
        border-bottom-left-radius : $base-border-radius;
        border-bottom-right-radius: $base-border-radius;

        &:after {
          bottom: auto;
          top   : 0;
        }

        &:hover {
          // margin-bottom: 2px;
        }

        &.ui-active {
          // margin-top   : -1px;
          // margin-bottom: 0;

          &:after {
            bottom: 0;
            top   : auto;
          }
        }
      }
    }
  }
}