.text(normal) {
  font-weight: normal;
  color: @text-color;
  text-shadow: none;
}

.text(subtle) {
  font-weight: normal;
  color: @text-color-subtle;
  text-shadow: none;
}

.text(highlight) {
  font-weight: normal;
  color: @text-color-highlight;
  text-shadow: 0 1px 0 rgba(0,0,0, .5);
}

.text(selected) {
  .text(highlight)
}

.text(info) {
  color: @text-color-info;
  text-shadow: none;
}
.text(success) {
  color: @text-color-success;
  text-shadow: none;
}

.text(warning) {
  color: @text-color-warning;
  text-shadow: none;
}

.text(error) {
  color: @text-color-error;
  text-shadow: none;
}

.svg-bg (@image) {
  @url_encoded: escape(@image);
  background: transparent url('data:image/svg+xml;utf8,@{url_encoded}') no-repeat center;
}

.fix-gpu (@transform: translate3d(0, 0, 0), @backface: hidden) {
  backface-visibility: @backface;
  transform: @transform;
}

.appearance (@appearance, @firefox: @appearance) {
  -webkit-appearance: @appearance;
  -moz-appearance: @firefox;
  appearance: @appearance;
}

.ellipsis () {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.size (@width, @height: @width) {
  width: @width;
  height: @height;
}

.pseudo(@display: block, @content: '') {
  display: @display;
  content: @content;
}

.flex-size(@width, @height) {
  min-width: @width;
  max-width: @width;
  min-height: @height;
  max-height: @height;
}

.flex-size(@square) {
  min-width: @square;
  max-width: @square;
  min-height: @square;
  max-height: @square;
}

.placeholder (@color:#aaa) {
  &::-webkit-input-placeholder {
    color: @color;
  }
  &:-moz-placeholder {
    color: @color;
  }
  &::-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
}