@use "../../style/variables" as *;

$tp-prefix: #{$prefix}-typography;

.#{$tp-prefix} {
  box-sizing: border-box;
  & + h1.#{$tp-prefix},
  & + h2.#{$tp-prefix},
  & + h3.#{$tp-prefix},
  & + h4.#{$tp-prefix} {
    margin-top: 1.2em;
  }

  & + h5.#{$tp-prefix},
  & + h6.#{$tp-prefix} {
    margin-top: 1.1em;
  }

  ul {
    list-style-type: circle;
  }

  ul, ol {
    margin: 0 0 1em;
    padding: 0;

    li {
      margin: 0 0 0 20px;
      padding: 0 0 0 4px;
    }
  }

  code {
    margin: 0 .1em;
    padding: .2em .4em .1em;
    font-size: 85%;
    background: var(--ty-typography-code-bg);
    border: 1px solid var(--ty-typography-code-border);
    border-radius: var(--ty-typography-code-radius);
  }

  mark {
    padding: 0;
    background-color: var(--ty-typography-mark-bg);
  }

  sup {
    vertical-align: super;
  }

  sub {
    vertical-align: baseline;
  }
}

h1.#{$tp-prefix},
h2.#{$tp-prefix},
h3.#{$tp-prefix},
h4.#{$tp-prefix},
h5.#{$tp-prefix},
h6.#{$tp-prefix} {
  margin-top: 0;
  margin-bottom: var(--ty-typography-heading-margin-bottom);
  color: var(--ty-typography-heading-color);
  font-weight: var(--ty-typography-heading-font-weight);
}

h1.#{$tp-prefix} {
  font-size: var(--ty-h1-font-size);
  line-height: 1.23;
}

h2.#{$tp-prefix} {
  font-size: var(--ty-h2-font-size);
  line-height: 1.35;
}

h3.#{$tp-prefix} {
  font-size: var(--ty-h3-font-size);
  line-height: 1.35;
}

h4.#{$tp-prefix} {
  font-size: var(--ty-h4-font-size);
  line-height: 1.4;
}

h5.#{$tp-prefix} {
  font-size: var(--ty-h5-font-size);
  line-height: 1.2;
}

h6.#{$tp-prefix} {
  font-size: var(--ty-h6-font-size);
  line-height: 1.2;
}

p.#{$tp-prefix}, div.#{$tp-prefix}, blockquote.#{$tp-prefix} {
  margin-top: 0;
  margin-bottom: var(--ty-typography-block-margin-bottom);
  color: var(--ty-typography-body-color);
  font-size: var(--ty-typography-body-font-size);
  line-height: var(--ty-typography-body-line-height);
}

span.#{$tp-prefix},
label.#{$tp-prefix},
small.#{$tp-prefix},
strong.#{$tp-prefix},
em.#{$tp-prefix},
i.#{$tp-prefix},
b.#{$tp-prefix},
mark.#{$tp-prefix},
kbd.#{$tp-prefix},
time.#{$tp-prefix} {
  color: var(--ty-color-text-label);

  .#{$tp-prefix}__content {
    min-width: 0;
  }

  .#{$tp-prefix}__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    margin-inline-start: 6px;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    opacity: .72;
    transition: opacity .2s ease;

    &:hover {
      opacity: 1;
    }
  }

  &.#{$tp-prefix}_copyable {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    vertical-align: bottom;
  }

  &.#{$tp-prefix}_ellipsis {
    max-width: 100%;

    .#{$tp-prefix}__content {
      display: inline-block;
      max-width: 100%;
    }
  }

  &.#{$tp-prefix}_ellipsis-multiline {
    .#{$tp-prefix}__content {
      display: -webkit-box;
    }
  }

  &.#{$tp-prefix}_default {
    color: var(--ty-color-text-label);
  }

  &.#{$tp-prefix}_secondary {
    color: var(--ty-typography-body-color);
  }

  &.#{$tp-prefix}_success {
    color: var(--ty-color-success-text);
  }

  &.#{$tp-prefix}_warning {
    color: var(--ty-color-warning-text);
  }

  &.#{$tp-prefix}_danger {
    color: var(--ty-color-danger-text);
  }

  &.#{$tp-prefix}_info {
    color: var(--ty-color-info-text);
  }
}