@import "ui-variables";

.text-bits (@type) {
  @text-color-name: "text-color-@{type}";
  @bg-color-name: "background-color-@{type}";

  @text-color: @@text-color-name;
  @bg-color: @@bg-color-name;

  code {
    color: @text-color;
    background: fadeout(@bg-color, 80%);
  }

  a, a code {
    text-decoration: underline;
    color: darken(@text-color, 10%);

    &:hover {
      color: darken(@text-color, 15%);
    }
  }
}

.text-info {
  .text-bits(info);
}

.text-success {
  .text-bits(success);
}

.text-warning {
  .text-bits(warning);
}

.text-error {
  .text-bits(error);
}