/*
 * Author: Sivan [sun.sivan@gmail.com]
 * Description: define vertical layout classes.
 */
@import "variables";

@mixin hetiLayoutModifier {
  // 定义垂直布局
  &-vertical {
    max-width: none;
    max-height: $line-length;
    writing-mode: vertical-rl;
    letter-spacing: 0.125em;
  }

  // 定义古文、诗词样式
  &-poetry,
  &-ancient {
    font-family: $font-family-song;

    h1,
    h2,
    h3 {
      font-family: $font-family-song;
      font-weight: $font-weight-bolder;
      text-align: center;

      // 标题内元信息，不应占据空间影响标题文字居中
      #{$root-selector}-meta {
        display: block;
        font-weight: 400;

        @media screen and (min-width: 640px) {
          @include hang();

          display: inline;
          margin-block-start: 4px;
          margin-inline-start: 8px;
        }
      }
    }

    #{$root-selector}-verse {
      text-align: center;
      text-indent: 0;
    }

    // 古文（文言文、词）默认首行缩进
    p {
      text-indent: $text-indent-length;
    }
  }

  // 定义行间注样式
  // @todo: 类名太长了，得简化一下
  &-interlinear-annotation {
    // 首行缩进且行间距大，无需添加段落边距
    p {
      margin-block-start: 0;
      margin-block-end: 0;
      line-height: $line-height-expanded-ultra;
      text-indent: $text-indent-length;
    }

    // 着重号不应影响行间距，经测试最小可用行高为 1.7
    em {
      -webkit-text-emphasis: filled circle;
      -webkit-text-emphasis-position: under;
      font-weight: $font-weight-normal;

      @include non-cjk-block {
        -webkit-text-emphasis: none;
      }
    }

    // ruby 不应影响行间距，经测试最小可用行高为 2
    //ruby {}
  }
}