@use '../base/mixins' as mixins;

article {
  .table {
    width: 100%;
    border-spacing: 0;

    thead {
      vertical-align: bottom;
      background-color: var(--site-raised-bgColor);

      th {
        border-top: 1px solid var(--site-outline-variant);
        text-align: start;
      }
    }

    tbody {
      tr {
        vertical-align: top;

        &:nth-of-type(odd) {
          background-color: rgb(var(--site-interaction-base-values) / 3%)
        }
      }
    }

    td, th {
      border: none;
      border-top: 1px solid var(--site-inset-borderColor);
      padding: .75rem;
    }
  }

  // If table head has empty children, just hide it
  // since markdown-it's tables don't support headless tables.
  thead:has(th:empty) {
    display: none;
  }

  .table-wrapper {
    overflow-x: auto;
    margin-block-start: 1rem;
    margin-block-end: 1rem;
  }

  #site-content-title {
    margin-bottom: 1rem;
    scroll-margin: 4.5rem;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    // Push # link targets clear of page header.
    &[id] {
      scroll-margin: 4.5rem;
    }

    // Let the wrapper set the bottom margin.
    margin-bottom: 0;
  }

  // Push # link targets clear of page header.
  a[id] {
    scroll-margin: 4.5rem;
  }

  .header-wrapper {
    display: flex;
    margin-block-start: 1.5rem;
    margin-block-end: 0.75rem;
    align-items: center;

    > h1, h2, h3, h4, h5, h6 {
      margin: 0;
    }

    .heading-link {
      border-radius: 0.125rem;
      margin-left: 0.4rem;
      font-size: 1.3rem;
      line-height: 1;
      @include mixins.transition(.1s);
      overflow: hidden;
      color: var(--site-base-fgColor-alt);
      opacity: 0;
      text-decoration: none;

      &:hover {
        color: var(--site-link-fgColor);
      }

      &:focus {
        opacity: 1;
      }

      &:active {
        color: var(--site-link-fgColor-active);
      }
    }

    &:hover {
      .heading-link {
        opacity: 1
      }
    }
  }

  .footnote {
    margin: 0;
    padding: 0;
    list-style-type: none;

    li {
      counter-increment: step-counter;
      margin-bottom: 10px;
      position: relative;

      &:before {
        content: counter(step-counter);
        position: absolute;
        left: -25px;
        top: -3px;
        font-size: 20px;
        font-weight: bold;
        padding: 3px 8px;
      }
    }
  }

  .content {
    > p {
      > i.material-symbols, > span.material-symbols {
        vertical-align: bottom;
        user-select: none;
      }
    }

    > lite-youtube {
      margin-block-end: 1rem;
    }
  }

  lite-youtube:not(.full-width) {
    max-width: 560px;
  }
}
