.transparentAnimation(@color; @borderColor) {
  border-color: @borderColor;
  &::before {
    .bc(@color);
  }
  color: @color !important;
}

.transparent-btn {
  position: relative;
  transition: 0.3s ease-in-out;

  &:hover,
  &.animated {
    .bc(transparent);

    &.blue-btn {
      .transparentAnimation(@blue, @blue);
    }
    &.pink-btn {
      .transparentAnimation(@pink, @pink);
    }

    &.green-btn {
      .transparentAnimation(@green, @green);
    }

    &.yellow-btn {
      .transparentAnimation(@yellow, @yellow);
    }
    &.orange-btn {
      .transparentAnimation(@orange, @orange);
    }

    &.red-btn {
      .transparentAnimation(@red, @red);
    }

    &.purple-btn {
      .transparentAnimation(@purple, @purple);
    }

    &.black-btn {
      .transparentAnimation(@black, @black);

      [data-theme="dark"] &,
      &.dark-mode {
        .transparentAnimation(@white, @white);
      }
    }

    &.white-btn {
      .transparentAnimation(@white, @whiteBorder);
    }
  }
}