@fontSize: 37.5;
@baseWidth: 750;
@baseHeight: 1334;
@bodyBgColor: #f9f9f9;
@primaryTextColor: #333;
@minorTextColor: #666;
@primaryErrorColor: #AB1941;
@base-url: "../images";

// one rem 第一种算法
@default-w: 375px;
.convert(@px, @width: @default-w) {
  @var: unit(@px / @width) * 10;
  @rem: ~"@{var}rem";
}

// two rem 第二种算法
.convertCalc(@px, @width: @baseWidth) {
  @var: unit(@px / @width) * 10;
  @rem: ~"@{var}rem";
}

// mixins 换行
.wordWrap() {
  white-space: pre-wrap;
  word-break: break-all;
  word-wrap: break-word;
}

.background-image-mixin(@base-url, @image-name) {
  // 默认加载 1x 图片
  background-image: url("@{base-url}/@{image-name}@1x.png"); 

  // 媒体查询加载 2x 图片
  @media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    background-image: url("@{base-url}/@{image-name}@2x.png");
  }

  // 媒体查询加载 3x 图片
  @media only screen and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
    background-image: url("@{base-url}/@{image-name}@3x.png");
  }
}

html, body, h1, h2, h3, h4, h5, h6, p, div, table, tr, td, tbody, tfoot, th, dl, dt, dd, ol, ul, li, a, sub, sup, strong, b, em, i, code, pre, img, section, article, input, textarea, span, blockquote {
  margin: 0;
  padding: 0;
  margin-block: 0;
  // touch-action: manipulation; /* 防止点击时弹出软键盘 */
  outline: none;
}
span {
  // pointer-events: none;
}
* { -webkit-touch-callout: none; }
input, textarea, span {
  outline: none;
  resize: none;
}
a, a:hover {
  text-decoration: none;
  border: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
input[type=radio], input[type=checkbox] {
  display: none;
}

sub, pre, code {
  user-select: none;
  -webkit-user-select: none;
}

line {
  border-bottom: 2px solid @primaryErrorColor;
  font-weight: normal;
  cursor: pointer;
}
light {
  font-weight: normal;
  cursor: pointer;
  &.c-feff00 {
    background-color: #feff00;
    &::selection {
      background-color: #feff00;
    }
  }
  &.c-00ff00 {
    background-color: #00ff00;
    &::selection {
      background-color: #00ff00;
    }
  }
  &.c-00ffff {
    background-color: #00ffff;
    &::selection {
      background-color: #00ffff;
    }
  }
  &.c-ff00ff {
    background-color: #ff00ff;
    &::selection {
      background-color: #ff00ff;
    }
  }
  &.c-d2b3fa {
    background-color: #d2b3fa;
    &::selection {
      background-color: #d2b3fa;
    }
  }
  &.c-ff4500 {
    background-color: #ff4500;
    &::selection {
      background-color: #ff4500;
    }
  }
}