%tab-a {
  display: inline-block;
  text-decoration: none;
  //font-weight: bold;
  //border-bottom: 3px solid transparent;
  //border-top: 3px solid transparent;
  font-size: $font-h4;
  margin-right: $box-padding;
  white-space: nowrap;
  &:hover {
    text-decoration: none;
  }
}

%tab-li {
  position: relative;
  margin-bottom: -1px;
  list-style-type: none;

  & > a {
   @extend %tab-a;
  }
}

%tab-ul {
  box-sizing: border-box;
  @extend %inline-flex;
  @include respond-to(min-menu-collapse){
    @include display(flex);
    @include flex-wrap(wrap);
  }
  margin: 0;
  padding-left: $box-padding;
  padding-right: $box-padding;
  min-width: 100%;

  .ui-dialog &{
    padding-left: 0;
    padding-right: 0;
  }

  & > li {
    @extend %tab-li;
  }
}

%tab-parent {
  position: relative;
  overflow: hidden;
  //z-index: 1;
  margin-top: 0;
  margin-bottom: .5*$box-padding;

  .easy-content-page &{
    margin-left: -$box-padding;
    margin-right: -$box-padding;
  }
  & > ul {
    @extend %tab-ul;
  }
}

@mixin tab-a($color-background, $color-border, $color-text, $tab-height, $gap, $color-active) {
  @extend %tab-a;
  line-height: -2+$tab-height;
  color: mute-color($color-text);
  @extend %pseudo-after;
  &:hover {
    color: $color-text;
  }

  &.selected {
    //border-bottom: 3px solid $color-active;
    color: $color-text;
    &:after{
      border-bottom: 2px solid $color-active;
      left: 0;
      right: 0;
      bottom: 2px;
    }
  }
}

@mixin tab-li($color-background, $color-border, $color-text, $tab-height, $gap, $color-active) {
  @extend %tab-li;

  & > a {
    @include tab-a($color-background, $color-border, $color-text, $tab-height, $gap, $color-active);
  }
}

@mixin tab-ul($color-background, $color-border, $color-text, $tab-height, $gap, $color-active) {
  @extend %tab-ul;
  @extend %list-style-none;

  //border-bottom: 1px solid $color-border;

  & > li {
	 @include tab-li($color-background, $color-border, $color-text, $tab-height, $gap, $color-active);
  }
}

@mixin tab-parent($color-background, $color-border, $color-text, $tab-height, $gap, $color-active) {
  @extend %tab-parent;

  & > ul {
    @include tab-ul($color-background, $color-border, $color-text, $tab-height, $gap, $color-active);
  }

  .tabs-buttons {
    @include respond-to(min-menu-collapse){
      display: none !important;
    }
    @extend %control-menu-buttons;

    button {
      //transform: translateY(-50%);
      //width: 2*$box-padding;
    }
  }
}

%tab-content {
  margin-top: -1px;
  //overflow: hidden;
  @extend %clearfix;
  padding-top: $box-padding;
  .box{
	//margin: 0 0 $gap 0;
  }
  .box &, .easy-content-page &{
    padding: $box-padding;
    @include respond-to(max-medium-screen) {
      padding: 0 $box-padding $box-padding;
    }
    margin: -1px (-$box-padding) (-$box-padding);
  }
  & > p{
    &:first-child{
      margin-top: $box-padding;
    }
  }
}