.neon-border-btn {
  .neon(@col) {
    color: @col;
    background-color: @col;
    background: transparent;
    box-shadow: inset 0 0 8px 0 @col, 0 0 11px 0 @col;
    transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
    border: @col solid 2px;
    text-shadow: 0 0 0.05px @white, 0 0 0.3px currentColor;
    &:hover {
      background-color: @col;
      box-shadow: @col;
      text-shadow: none;
    }
  }

  [data-theme="dark"] &,
  &.dark-mode:not(.yellow-btn),
  &:hover:not(.white-btn):not(.yellow-btn) {
    color: @white !important;
  }

  &.green-btn {
    .neon(@neonGreen);
  }

  &.blue-btn {
    .neon(@neonBlue);
  }

  &.red-btn {
    .neon(@neonRed);
  }

  &.purple-btn {
    .neon(@neonPurple);
  }

  &.orange-btn {
    .neon(@neonOrange);
  }

  &.yellow-btn {
    .neon(@neonYellow);
    &:hover {
      color: @black !important;
    }
  }

  &.pink-btn {
    .neon(@neonPink);
  }

  &.black-btn {
    .neon(@neonBlack);
    &:hover {
      color: @lightText !important;
    }
    [data-theme="dark"] &,
    &.dark-mode {
      .neon(@neonWhite);
      &:hover {
        color: @black !important;
      }
    }
  }

  &.white-btn {
    .neon(@neonWhite);
    &:hover {
      color: @darkText !important;
    }
    [data-theme="dark"] &,
    &.dark-mode {
      .neon(@neonWhite);
    }
  }
}