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

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

  .ui-tab-bar {
    @include flex-auto();
    @include flex-row($align:stretch);
    overflow: hidden;
    height  : 2rem;
    padding : 2px 4px 0;

    > .ui-tab-button {
      @include flex-row($align:center);
      @include flex-auto();
      font-size              : .9rem;
      padding                : $base-padding;
      margin                 : 4px 2px 0;
      border                 : 1px solid $base-border-color;
      border-bottom-width    : 0;
      border-top-left-radius : $base-border-radius;
      border-top-right-radius: $base-border-radius;

      .ui-label {
        @include ellipsis();
        max-width: 8rem;
        padding  : 0 .5em;
      }

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

      &:hover {
        margin-top: 2px;
        @include box-shadow(0 -4px 0 0 rgba($primary, .5) inset);
      }

      &.ui-active {
        margin-top  : 0;
        color       : $white;
        background  : $primary;
        border-color: $primary;
        @include box-shadow(0 1px 0 0 $primary);
      }

      .ui-close {
        opacity: .7;

        &:hover {
          opacity: 1;
        }
      }
    }
  }

  .ui-tab {
    @include flex-fill();
    border: 1px solid $base-border-color;

    &:not(.ui-active) {
      display: none;
    }
  }

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

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

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

  &.bottom {
    @include flex-direction(column-reverse);

    .ui-tab-bar {
      padding: 0 4px 2px;

      > .ui-tab-button {
        margin                    : 0 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;

        &:hover {
          margin-bottom: 2px;
          @include box-shadow(0 4px 0 0 rgba($primary, .5) inset);
        }

        &.ui-active {
          margin-bottom: 0;
          @include box-shadow(0 -1px 0 0 $primary);
        }
      }
    }
  }
}