.borderRule(@color) {
  border: dashed 2px @color;
  color: @color !important;
}

.dashed-btn {
  background-color: transparent;

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

  &.red-btn {
    .borderRule(@red);
  }

  &.green-btn {
    .borderRule(@green);
  }

  &.yellow-btn {
    .borderRule(@yellow);
  }

  &.orange-btn {
    .borderRule(@orange);
  }

  &.purple-btn {
    .borderRule(@purple);
  }

  &.black-btn {
    .borderRule(@black);

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

  &.white-btn {
    border: dashed 2px @whiteBorder;
    color: @darkText !important;

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