/* *****************************************************************************
*
*  Links
*
* ***************************************************************************** */

// Animated links on Event or State
.link-highlight {
  @extend .link--no-decoration;
  position: relative;
  display: inline-block;
  padding: 1.2rem 0;
  text-decoration: none;

  .active & {
    font-weight: $font-weight-bold;
  }

  &:before {
    @include transitions(transform $transition-time-base ease-out);
    content: '';
    position: absolute;
    bottom: 0;
    top: auto;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: $primary;
    transform: scaleY(0);
    transform-origin: center bottom;
  }

  &--active,
  .active &,
  &.active,
  &:hover {
    &:before{
      transform: scaleY(1);
      //transform-origin: 0% 50%;
      background-color: $primary;
    }
  }

  //
  @at-root .navbar-brand--subnav #{&} {
    padding: $nav-link-padding-y $nav-link-padding-x;
    font-size: $font-size-base;

    &:before {
      height: 2px;
      background-color: $gray-500;
    }
  }
}