@import 'variable';

#{$biz-css-prefix}text {
  &-inherit {
    color: var(--page-body1-font-color);
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    line-height: inherit;
  }

  @each $type in $fontTypes {
    #{$biz-css-prefix}p--#{$type} > a,
    &-#{$type} {
      color: var(--page-#{$type}-font-color);
      font-size: var(--p-#{$type}-font-size);
      font-weight: var(--p-#{$type}-font-weight);
      line-height: var(--p-#{$type}-line-height);
      font-family: var(--font-family-base);
    }
  }
}

#{$biz-css-prefix}text {
  text-align: justify;

  &-title {
    font-weight: bold;
    margin-bottom: 0.5em;
  }

  & + &-title {
    margin-top: 1.2em;
  }

  &-paragraph {
    color: #1f2633;
    margin-bottom: 1em;
    font-size: 14px;
    line-height: 1.5;
  }

  mark {
    padding: 0;
    background: #fffbc7;
    color: #1f2633;
  }

  strong {
    font-weight: bold;
  }

  code {
    background-color: #f4f6f9;
    color: #1f2633;
    border: 1px solid #e4e8ee;
    margin: 0 0.2em;
    padding: 0.2em 0.4em 0.1em;
    font-size: 85%;
    border-radius: 4px;
  }

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

  li {
    list-style-type: circle;
    margin: 0 0 0 20px;
    padding: 0 0 0 4px;
  }

  a {
    text-decoration: none;
    &:link {
      color: rgba(3, 193, 253, 1);
    }
    &:visited {
      color: rgba(0, 123, 176, 1);
    }
    &:hover {
      color: rgba(0, 157, 214, 1);
    }
    &:active {
      text-decoration: underline;
      color: rgba(0, 157, 214, 1);
    }
  }
}

h1#{$biz-css-prefix}text-title {
  font-size: 24px;
}

h2#{$biz-css-prefix}text-title {
  font-size: 20px;
}

h3#{$biz-css-prefix}text-title {
  font-size: 16px;
}

h4#{$biz-css-prefix}text-title {
  font-size: 16px;
}

h5#{$biz-css-prefix}text-title {
  font-size: 14px;
}

h6#{$biz-css-prefix}text-title {
  font-size: 14px;
}