@use '../settings/colors';
@use '../settings/fonts';
@use '../settings/grid';

.toc {
  margin: 1rem 0;
  h2 {
    font-family: fonts.$font-family-italic;
    margin: 1.25rem 0 0.667rem 0;
    padding: 0;
    @include grid.fluid-type(30px, 38px);
    font-style: italic;
    font-weight: 366;
    line-height: 1.15;
    display: block;
  }
  ul,
  ol {
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 0;
    list-style-type: none;
    padding-left: 0.5rem;
    &.level1 {
      padding-left: 0;
    }
    &.level2 {
      margin-bottom: 1.35rem;
      padding-left: 0.5rem;
      @media (max-width: 480px) {
        padding-left: 0;
      }
    }
    &.level3 {
      @media (max-width: 480px) {
        padding-left: 0;
      }
    }
    li {
      @include grid.fluid-type(16px, 22px);
      padding-bottom: 0.225rem;
      &[data-public-domain='false'] {
        color: colors.$gray;
        opacity: 0.5;
      }
      &.level2 {
        margin-top: 0.2rem;
      }
      &.parent {
        text-transform: uppercase;
        letter-spacing: 0.03125rem;
        margin-top: 0.4rem;
        &.level1 {
          @include grid.fluid-type(24px, 28px);
          font-weight: 466;
        }
      }
      .numbered-name {
        display: flex;
        flex-direction: row;
      }
      .numeral {
        @include grid.fluid-type(14px, 20px);
        line-height: 150%;
        display: inline-block;
        width: 40px;
        min-width: 49px;
        text-align: right;
        margin-right: 0.35rem;
        @media (max-width: 480px) {
          line-height: 170%;
          width: 36px;
          min-width: 36px;
        }
      }
      .line {
        white-space: pre-wrap;
        text-indent: -1em;
        padding-left: 1em;
        display: inline-block;
        .indent {
          letter-spacing: 0.2rem;
          @media (max-width: 480px) {
            letter-spacing: 0.175rem;
          }
        }
      }
    }
  }
}

// Book specific hacks
article[data-slug='is-5'] {
  ul,
  ol {
    li {
      .numeral {
        min-width: 70px;
        @media (max-width: 480px) {
          min-width: 52px;
        }
      }
    }
  }
}
