HBM/md-components

/**
 * 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);

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

.mdc-Tabs-Item {
  flex: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  & > a { // user defined custom Link --> no classname
    padding: 13px 12px;
    display: block;
    text-decoration: none;
    color: rgba($blue-dark, 0.6);
  }
}

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

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

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

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