@colors: @blue, @pink, @red, @green, @yellow, @orange, @purple, @black, @white;
@colorbtns: blue-btn, pink-btn, red-btn, green-btn, yellow-btn, orange-btn,
  purple-btn;

.colored-on-hover-colorspecific-mixin(@param) when (@param ="hover") {
  each(@colorbtns, {
      &.@{value} {
        @colortoget : extract(@colors, @key);
        background-color: @colortoget;
        color: if(@colortoget = @yellow or @colortoget = @white, @darkText, #fff);

      }
    }

  );

  /* set black-btn and white-btn apart to add dark mode */
  &.black-btn {
    [data-theme="dark"] &,
    &.dark-mode {
      color: @white !important;
    }
    background-color: @black;
    color: @white;
  }

  &.white-btn {
    [data-theme="dark"] &,
    &.dark-mode {
      color: @black !important;
    }
    background-color: @white;
    color: @black;
  }
}

.colored-on-hover-colorspecific-mixin(@param) when (@param ="hoverless") {
  each(@colorbtns, {
      &.@{value} {
        @colortoget : extract(@colors, @key);
        border-color: @colortoget;
        color: @colortoget;
      }
    }

  );

  /* set black-btn and white-btn apart to add dark mode */
  &.black-btn {
    border-color: @black;
    color: @black;

    [data-theme="dark"] &,
    &.dark-mode {
      color: @white !important;
    }
  }

  &.white-btn {
    border-color: @white;
    color: @black;

    [data-theme="dark"] &,
    &.dark-mode {
      color: @white !important;
    }
  }
}

.sbtn.colored-on-hover-btn {
  background-color: transparent;
  transition: all 0.25s;

  .colored-on-hover-colorspecific-mixin("hoverless");

  &:hover {
    .colored-on-hover-colorspecific-mixin("hover");
  }
}