@each $color, $value in $theme-colors {
  .btn-underline-#{$color} {
    @include button-underline-variant($value);
  }
}

/**
 * Underline Buttons with border animation
 * @see https://codepen.io/Toomean/pen/xLhpg
 */
 @keyframes move-left-come-on-right {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(100%);
    border-color: transparent;
  }
  50% {
    transform: translateX(-100%);
    border-color: transparent;
  }
  75%   {
    border-color: '';
  }
  
  100% {
    transform: translateX(0);
  }
}

.btn-wrapper {
  overflow: hidden;
}

@each $color, $value in $theme-colors {
  .btn-animated-underline-#{$color} {
    @include button-animated-underline-variant($value);
  }
}

.btn-icon {
  @extend .btn-link;
  @extend .d-flex;
  @extend .justify-content-start;
  @extend .align-items-center;
  padding: 0;
  text-decoration: none;
  color: inherit;
  &:hover {
    text-decoration: none;
    color: inherit;
  }
  &:focus {
    box-shadow: none;
    color: inherit;
  }
}