.no-user-select() {
  user-select: none;
  -webkit-user-select: none;
}

.placeholder(@color) {
  &::placeholder,
  &:-ms-input-placeholder,
  &::-moz-placeholder,
  &::-webkit-input-placeholder  {
    color: @color;
    opacity: 1;
  }
}

.icon-mask(@icon, @color) {
  background-color: @color;
  mask-image: @icon;
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: @icon;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}

.mask-image(@image) {
  mask-image: @image;
  -webkit-mask-image: @image;
}

.mask-size(@size) {
  mask-size: @size;
  -webkit-mask-size: @size;
}

.mask-position(@position) {
  mask-position: @position;
  -webkit-mask-position: @position;
}

.mask-repeat(@repeat) {
  mask-repeat: @repeat;
  -webkit-mask-repeat: @repeat;
}

.tool-icon-mask(@icon) {
  background-color: var(--icon-color);
  .mask-image(@icon);
}

.icon-mask(@icon) {
  .tool-icon-mask(@icon);
  .icon-mask-base();
}

.icon-mask-base() {
  .mask-size(100% 100%);
  .mask-position(center center);
  .mask-repeat(no-repeat);
}

/* for PNG icons; remove when dropped */
.icon-mask-base-png() {
  background-size: 100% 100%;
  background-origin: border-box;
  background-position: center center;
  background-repeat: no-repeat;
}
