/**
 * Underline buttons
 */
 @mixin button-underline-variant($color, $color-hover: darken($color, 15%), $active-background: $color, $active-border: darken($color, 15%)) {
  // color: $color;
  background-color: transparent;
  background-image: none;
  border-bottom-color: $color;
  border-width: 2px;
  text-decoration: none;
  border-radius: 0;
  color: $color;

  &:hover, &:focus, &.focus {
    color: $color-hover;
  }

  &:disabled {
    border-bottom-color: $btn-link-disabled-color;
  }

  &.disabled,
  &:disabled {
    color: $color;
    background-color: transparent;
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active,
  .show > &.dropdown-toggle {
    color: color-yiq($active-background);
    background-color: $active-background;
    border-color: $active-border;

    &:focus {
      // Avoid using mixin so we can pass custom focus shadow properly
      @if $enable-shadows and $btn-active-box-shadow != none {
        box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
      } @else {
        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
      }
    }
  }
}

/**
 * Note: css :after style is not working on input elements like <input type="submit" ../>
 */
 @mixin button-animated-underline-variant($color, $color-hover: darken($color, 15%)) {
  // color: $color;
  background-color: transparent;
  background-image: none;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  border-radius: 0;
  color: $color;

  &:hover, &:focus, &.focus {
    color: $color-hover;
  }

  &:after {

    transition: .1s transform linear, .1s height linear .1s;

    // .box-sizing;         
    transform: translateX(0);

    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 99.5%;
    height: 2px;
    border-bottom: 2px solid $color;
    overflow: hidden;
  }
  
  &.btn-animation-start {
    // color: inherit;
    text-decoration: none;
    &:after {
      // transform: translateX(0);
      animation: move-left-come-on-right 1000ms normal linear;
      height: 100%;
    }
  }

  &:disabled {
    &:after {
      border-bottom-color: $btn-link-disabled-color;
      animation: none;
    }
  }
}