@import '../../variables';
@import '../../mixins';

@include exports('components.fui-tabs') {
  .fui-tabs {
    width: 100%;
    display: flex;
    flex-direction: column;

    &.fui-tabs-inverted-header {
      flex-direction: column-reverse;
    }
  }

  // Note that we only want to target direct descendant tabs.
  .fui-tabs[fui-stretch-tabs] > .fui-tab-header .fui-tab-label {
    flex-basis: 0;
    flex-grow: 1;
  }

  // The bottom section of the view; contains the tab bodies
  .fui-tab-body-wrapper {
    position: relative;
    overflow: hidden;
    display: flex;
    margin-top: $fui-default-padding;
  }

  // Wraps each tab body
  .fui-tab-body {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    display: block;
    overflow: hidden;

    // Fix for auto content wrapping in IE11
    flex-basis: 100%;

    &.fui-tab-body-active {
      position: relative;
      z-index: 1;
      flex-grow: 1;
    }

    .fui-tab-body-content {
      height: auto;
      overflow: hidden;
    }
  }
}