@import '../../base.less';

@import './_var.less';

.@{prefix}-typography {
  color: @typography-text-primary-color;
  font: @font-body-medium;
  margin: @spacer-2 0;

  // 标题
  h1& {
    font: @typography-h1-font;
    margin-top: @spacer-4;
    margin-bottom: @spacer-3;
  }

  h2& {
    font: @typography-h2-font;
    margin-top: @spacer-4;
    margin-bottom: @spacer-3;
  }

  h3& {
    font: @typography-h3-font;
    margin-top: @spacer-4;
    margin-bottom: @spacer-2;
  }

  h4& {
    font: @typography-h4-font;
    margin-top: @spacer-3;
    margin-bottom: @spacer-2;
  }

  h5& {
    font: @typography-h5-font;
    margin-top: @spacer-3;
    margin-bottom: @spacer-2;
  }

  h6& {
    font: @typography-h6-font;
  }

  // 加粗样式
  strong {
    font-weight: @typography-text-strong;
  }

  // 标记样式
  mark {
    background-color: @typography-text-mark-color;
  }

  // 代码样式
  code {
    border-radius: @radius-default;
    border: 1px solid @component-border;
    margin: 0 @spacer;
    background-color: @bg-color-secondarycontainer;
    padding: 0 @spacer;
    transition: background-color .2s;
    white-space: nowrap;
    font: @typography-code-font;
    font-family: @typography-code-family;
    display: inline-block;
  }

  // 键盘样式
  kbd {
    border-radius: @radius-default;
    border: 1px solid @component-border;
    margin: 0 calc(@spacer / 2);
    background-color: @bg-color-secondarycontainer;
    padding: 0 @spacer;
    box-shadow: 0 1px 0 0 @component-border;
    font: @typography-code-font;
    font-family: @typography-code-family;
    display: inline-block;
  }

  // 不可选样式
  &--disabled {
    color: @typography-text-disabled-color;
    cursor: not-allowed;
  }

  // 主题样式
  &--success {
    color: @typography-text-success-color;
  }

  &--warning {
    color: @typography-text-warning-color;
  }

  &--error {
    color: @typography-text-error-color;
  }

  &--secondary {
    color: @typography-text-secondary-color;
  }

  &__copy:not(:empty) {
    margin: 0 4px;
  }

  &-ellipsis-symbol,
  .t-icon-copy {
    color: @typography-icon-color;
    cursor: pointer;
  }

  .t-icon-checked {
    color: @success-color;
  }
}