.diagonalAnimation() {
  background-position: 100%;
  color: @white !important;
  transform: translateX(16px);
}

.diagonalYellowAnimation() {
  background-position: 100%;
  transform: translateX(16px);
  color: @darkText !important;
}

.diagonalWhiteAnimation() {
  background-position: 100%;
  transform: translateX(16px);
}

.diag-btn {
  text-decoration: none;
  display: inline-block;
  padding: 16px 32px;
  background-size: 250%;
  transition: all 0.4s;
  background-color: transparent;
  outline: none;
  border: none;

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

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

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

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

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

  &.yellow-btn {
    .diagonalBackground(@yellow, @yellow);

    &:hover {
      .diagonalYellowAnimation();
    }
  }

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

  &.black-btn {
    .blackBtnDarkMode();
    .diagonalBackground(@darkText, @black);
  }

  &.white-btn {
    .whiteBtnDarkMode();
    .diagonalBackground(@darkText, @white);

    &:hover {
      .diagonalWhiteAnimation();
    }
  }

  &:hover:not(.white-btn):not(.yellow-btn) {
    .diagonalAnimation();
  }

  &.animated:not(.white-btn):not(.yellow-btn) {
    .diagonalAnimation();
  }

  &.animated.white-btn {
    .diagonalWhiteAnimation();
  }

  &.animated.yellow-btn {
    .diagonalYellowAnimation();
  }

  .diagonalBackground(@color, @bgColor) {
    background-image: linear-gradient(
      120deg,
      transparent 50%,
      @bgColor 50%
    ) !important;
    color: @color !important;
  }
}