// TODO: proof of concept - needs refactor
.md-tabs {
  width: 100%;
  background: $md-color-primary; //mix($md-color-primary, $md-color-black, 75%);
  overflow: scroll;

  &__list {
    margin: 0;
    margin-left: 6rem;
    padding: 0;
    list-style: none;
    white-space: nowrap;
  }

  &__item {
    display: inline-block;

    // text-transform: uppercase;
  }

  &__link {
    display: block;
    padding-right: 1.2rem;
    padding-left: 1.2rem;
    transition: color 0.25s;
    color: $md-color-white--light;
    font-size: 1.4rem;      // TODO: somehow centralize
    line-height: 4.8rem;

    &--active,
    &:hover {
      color: $md-color-white;
    }

    &--active {
      box-shadow: 0 -0.2rem 0 mix($md-color-accent, $md-color-white, 25) inset;
    }
  }
}