/*
  文本排版相关mixin
*/

// 单行文字溢出省略号
.ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: normal;
  word-break: keep-all;
}

// 书写模式：牌匾从右至左水平单行排版效果、文笺从右至左、从上至下排版效果
.writeMode(@mode: x) when (@mode = x) {
  direction: rtl;
  unicode-bidi: bidi-override;
}

.writeMode(@mode: x) when (@mode = y) {
  writing-mode: vertical-rl;
}

// 阻止长字符串（例如url或无意义连续英文字符）打破布局
.forceWrap() {
  white-space: pre-line; // CSS 3.0
  word-wrap: break-word; // IE 5+
}

// 用于隐藏元素内文字。如果使用此 mixin 的元素是 inline-block 元素，请确保为其设置宽度。
.hideText() {
  overflow: hidden;
  text-align: left;
  text-indent: -9999px;
}

.hide() {
  display: none;
}

// 删除线
.lineThrough() {
  text-decoration: line-through;
}

// 链接默认无下划线，hover后有下划线
.hoverLink() {
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

// 将链接变成默认的文字样式
.unstyledLink() {
  color: inherit;
  text-decoration: inherit;
  cursor: inherit;

  &:active,
  &:hover,
  &:focus {
    color: inherit;
    outline: none;
  }
}

// 内联块级元素
.inlineBlock() {
  display: inline-block;
}

// --------------------居中排版--------------------

// 文本水平居中
.center(text-x) {
  text-align: center;
}
// 多行文本垂直居中
.center(text-y) {
  display: table-cell;
  vertical-align: middle;
}

/*
  单行文本的垂直居中
  .center(inline, 30px)
  .center(inline, 30px, true)
*/
.center(inline, @height) {
  .center(inline, @height, false);
}
.center(inline, @height, @isInput) when not (@isInput) {
  height: @height;
  line-height: @height;
}

// 块元素水平居中
.center(auto-x) {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

// 水平居中，宽度确定
.center(known-x, @w) {
  position: absolute;
  left: 50%;
  width: @w;
  margin-left: -(@w / 2);
}

// 垂直居中，高度确定
.center(known-y, @h) {
  position: absolute;
  top: 50%;
  height: @h;
  margin-top: -(@h / 2);
}

// 水平垂直居中, 确定宽高，绝对定位+margin方式
.center(known, @w, @h) {
  position: absolute;
  top: 50%;
  left: 50%;
  width: @w;
  height: @h;
  margin-top: -(@h / 2);
  margin-left: -(@w / 2);
}

// 水平垂直居中, CSS3平移方式, IE兼容性存在问题：https://caniuse.com/?search=transform
.center(translate) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 水平垂直居中, Flex方式, IE兼容性存在问题：https://caniuse.com/?search=flex
.center(flex) {
  display: flex;
  align-items: center;
  justify-content: center;
}

// --------------------居中排版--------------------

// 文字下沉样式
// .dropCap用于段落元素首字下沉，.dropCapInline用于行内元素整个下沉

/*
  用于实现多字下沉样式。

  .dropCapInline(@lineHeight, @lines, @marginRight)
  @contextLineHeight
  所处环境的行高。单位可选% / px / em，或者直接使用缩放因子如 2。
  @lines
  下沉的行数。可选，默认值：2。
  @marginRight
  下沉文字与普通文字的间隔。可选，默认值为相对普通文字大小的 1em。
  @marginRight 直接设为 1em 时为相对下沉文字的字体大小，不设会自动转换为相对普通文字字体大小的 1em。
*/

.dropCapInline(@contextLineHeight) {
  @lines: 2;
  @marginRight: (1em / 2);
  .dropCapInline(@contextLineHeight, @lines, @marginRight);
}
.dropCapInline(@contextLineHeight, @lines) {
  @marginRight: (1em / @lines);
  .dropCapInline(@contextLineHeight, @lines, @marginRight);
}
.dropCapInline(@contextLineHeight, @lines, @marginRight) {
  float: left;
  margin-right: @marginRight;
  font-size: unit(@lines) * 1em;
}
.dropCapInline(@contextLineHeight, @lines, @marginRight) when (isnumber(@contextLineHeight)) {
  line-height: @contextLineHeight;
}
.dropCapInline(@contextLineHeight, @lines, @marginRight) when (ispercentage(@contextLineHeight)), (isem(@contextLineHeight)) {
  line-height: @contextLineHeight;
}
.dropCapInline(@contextLineHeight, @lines, @marginRight) when (ispixel(@contextLineHeight)) {
  line-height: @contextLineHeight * @lines;
}

/*
  用于实现首文字下沉样式。

  .dropCap(@lineHeight, @lines, @marginRight)
  @lineHeight
  行高。单位可选% / px / em，或者直接使用缩放因子如 2。
  @lines
  下沉的行数。可选，默认值：2。
  @marginRight
  下沉文字与普通文字的间隔。可选，默认值：1em（相对普通文字大小计算）。
  @marginRight 直接设为 1em 时为相对下沉文字的字体大小，不设会自动转换为相对普通文字字体大小的 1em。
*/
.dropCap(@lineHeight) {
  @lines: 2;
  @marginRight: (1em / 2);
  .dropCap(@lineHeight, @lines, @marginRight);
}
.dropCap(@lineHeight, @lines) {
  @marginRight: (1em / @lines);
  .dropCap(@lineHeight, @lines, @marginRight);
}
.dropCap(@lineHeight, @lines, @marginRight) {
  overflow: hidden; // 不能使用after和before伪元素清除浮动
  line-height: @lineHeight;

  &::first-letter {
    .dropCapInline(@lineHeight, @lines, @marginRight);
  }
}
