@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 {
    position: relative;
    text-align:center;
    text-shadow: 0 1px 1px $button-highlight;
    padding: 0 1em;
    line-height:2em;
    border-radius: .5em .5em 0 0;
    border: solid $base_alt2;
    border-width: 1px 1px 0;
    display: inline-block;
    background: $base $texture;
    @include opacity(.7);

    &, 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;
  }
}