.outlineRule(@color) {
  border-color: @color;
  color: @color !important;
}

.outlineDarkMode() {
  color: #fff !important;
  border-color: #fff !important;
}

.outline-btn {
  background-color: transparent;
  border: 1px solid;

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

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

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

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

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

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

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

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

  &.white-btn {
    border-color: @whiteBorder;
    color: @whiteBorderText !important;
  }
}