@import './skin';
@import './layout';
.tab-nav {
  @extend %tab-nav;
}
%tab-nav.animatable {
  @extend %with-animated-tab-selection;
}
%with-animated-tab-selection ul::after,
%tab-button-selected {
  @extend %frame-blue-300;
}
%tab-nav li > * {
  @extend %tab-button;
}
%tab-nav li:not(.selected) > *:hover,
%tab-nav li:not(.selected) > *:focus {
  @extend %tab-button-intent;
}
%tab-nav li:not(.selected) > *:active {
  @extend %tab-button-active;
}
/* TODO: need to add an empty class here */
%tab-nav .selected > * {
  @extend %tab-button-selected;
}