@use "@/styles/variables";

.article {
  // Disable container padding and add to .main for
  // preserving the space for outline
  @include variables.container(variables.$xl, 0);

  display: grid;
  grid-template-columns: 1fr 16rem;
  justify-content: center;
  column-gap: 2rem;

  @include variables.mq("xl") {
    grid-template-columns: 1fr;
  }
}

.tocWrap {
  display: flex;
  flex-direction: column;
  gap: 2rem;

  @include variables.mq("xl") {
    display: none;
  }
}

.toc {
  position: sticky;
  top: calc(variables.$headerHeight + 1rem);
  margin-right: 2rem;
}

.main {
  overflow-x: auto;
  position: relative;
  padding-right: 1rem;
}

.tocExtraLink {
  color: var(--cmm-color-font-subtle);
  font-size: var(--cmm-font-size-xs);
  font-weight: var(--cmm-font-weight-medium);
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: fit-content;

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

  &:not(:first-of-type) {
    margin-top: 0.5em;
  }

  > svg {
    width: 1.25em;
    height: 1.25em;
  }

  > .emoji {
    font-size: 1.25em;
  }
}
