/**
 * http://www.google.com/design/spec/components/tabs.html#tabs-specs
 */

$transition-duration: 0.25s;
$transition-delay: 0.075s;
$transition-function: cubic-bezier(0.35, 0, 0.25, 1);

.Tabs {
  position: relative;
  display: flex;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  border-bottom: 1px solid #eee;
}

.Tabs-Item {
  flex: 1;
  padding: 20px;
  text-align: center;
  color: rgba($blue-dark, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}

.Tabs-Item.active {
  color: $blue-dark;
}

.Tabs-InkBar {
  position: absolute;
  bottom: -1px;
  height: 2px;
  background-color: $blue-dark;
  will-change: left, right;
}

.Tabs-InkBar.transition-left {
  transition:
    left $transition-duration $transition-function,
    right $transition-duration $transition-function $transition-delay;
}

.Tabs-InkBar.transition-right {
  transition:
    right $transition-duration $transition-function,
    left $transition-duration $transition-function $transition-delay;
}