@import '_button.scss';

// TABS

@mixin tab_styles() {
  @extend .sub-text;
  @extend .larger-line-height; 
  width:auto; 
  float:none; 
  min-height: 2em; 
  padding:0; 
  margin: 0; 
  clear: both;
  border-bottom:1px solid $base_alt2;
  
  > li {
    @include pad(sides);
    @include opacity(.7);
    position: relative;
    text-align: center;
    border-radius: .5em .5em 0 0;
    border: solid $base_alt2;
    border-width: 1px 1px 0;
    display: inline-block;
    background: $base $texture;

    &, a {color: $meta;}

  }
  li.active {
    box-shadow: inset 0px 1px 2px $button-highlight , 0px -2px 3px rgba(0,0,0, .4);
    top:1px;
    padding-bottom:1px;
    &, a {color: $inverse;}
    @include opacity(1)
  }
}

.remote-tabs-nav {
  @include tab_styles
}

.tabbed {
  & > * {
    display: none; 
    position: relative;
    z-index: 1;
    @include trans(all, .3s, ease-in)
  }

  & > *.activeTab, 
  & > ul {
    display:block
  }
  
  & > ul {
    @include tab_styles;
  }
}
