// Mixins
// --------------------------

// 定义一个名为.fa-icon 的混合器（mixin）
.fa-icon() {
  // 将元素显示为内联块级元素
  display: inline-block;
  // 设置字体为'FontAwesome'，字体大小为 @fa-font-size-base 除以 @fa-line-height-base，
  // 字体粗细、风格和变体为 normal，通过缩短字体声明的方式设置。
  font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome;
  // 设置字体大小继承父元素的字体大小。因为上一行的字体声明不能同时包含继承，所以这里单独设置。
  font-size: inherit;
  // 设置文本渲染方式为自动，这样可以优化文本的显示效果。
  // 注意：'optimizelegibility'可能会导致一些问题，如 #1094 所描述的情况。
  text-rendering: auto;
  // 在 WebKit 浏览器内核中使用抗锯齿效果以提高字体的显示质量。
  -webkit-font-smoothing: antialiased;
  // 在 Mozilla 浏览器内核中使用灰度平滑效果以提高字体的显示质量。
  -moz-osx-font-smoothing: grayscale;
}

// 定义一个名为.fa-icon-rotate 的混合器，接收两个参数 @degrees（旋转角度）和 @rotation（用于 IE 的旋转值）
.fa-icon-rotate(@degrees, @rotation) {
  // 在 Internet Explorer 中设置旋转角度
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})";
  // 在 WebKit 浏览器内核中设置旋转角度
  -webkit-transform: rotate(@degrees);
  // 在 Internet Explorer 中设置旋转角度
  -ms-transform: rotate(@degrees);
  // 在标准 CSS 环境中设置旋转角度
  transform: rotate(@degrees);
}

// 定义一个名为.fa-icon-flip 的混合器，接收三个参数 @horiz（水平缩放值）、@vert（垂直缩放值）和 @rotation（用于 IE 的旋转值）
.fa-icon-flip(@horiz, @vert, @rotation) {
  // 在 Internet Explorer 中设置翻转效果
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation}, mirror=1)";
  // 在 WebKit 浏览器内核中设置缩放效果以实现翻转
  -webkit-transform: scale(@horiz, @vert);
  // 在 Internet Explorer 中设置缩放效果以实现翻转
  -ms-transform: scale(@horiz, @vert);
  // 在标准 CSS 环境中设置缩放效果以实现翻转
  transform: scale(@horiz, @vert);
}

// 仅将内容显示给屏幕阅读器。类似于 Bootstrap 4 的做法。
//
// 参考：http://a11yproject.com/posts/how-to-hide-content/
.sr-only() {
  // 将元素设置为绝对定位
  position: absolute;
  // 设置宽度为 1 像素
  width: 1px;
  // 设置高度为 1 像素
  height: 1px;
  // 清除内边距
  padding: 0;
  // 设置外边距为 -1 像素
  margin: -1px;
  // 设置内容溢出时隐藏
  overflow: hidden;
  // 使用裁剪矩形将内容隐藏
  clip: rect(0,0,0,0);
  // 清除边框
  border: 0;
}

// 与.sr-only 结合使用，仅在元素获得焦点时显示内容。
//
// 对于“跳转到主要内容”链接很有用；参考 http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
//
// 来源：HTML5 Boilerplate
.sr-only-focusable() {
  // 当元素处于激活状态或获得焦点时应用以下样式
  &:active,
  &:focus {
    // 将元素设置为静态定位
    position: static;
    // 设置宽度为自动
    width: auto;
    // 设置高度为自动
    height: auto;
    // 清除外边距
    margin: 0;
    // 使内容溢出时可见
    overflow: visible;
    // 清除裁剪矩形
    clip: auto;
  }
}