@use 'variables' as var;
@use "utils" as utils;

$toc-inline-offset: 5rem !default;

@mixin anchor-gradient($angle) {
  color: var(--fg);
  text-decoration: none;

  &:hover {
    color: var(--sidebar-active);
    background: linear-gradient($angle, var(--sidebar-bg) 64%, var(--bg));
  }

  &.active {
    color: var(--toc-fg);
    background: linear-gradient($angle, var(--toc-bg) 64%, var(--bg));
  }
}

.toc-container {
  display: flex;
  right: 0;
  position: fixed;

  z-index: 30;

  @media (max-width: var.$breakpoint-ui-wide) {
    right: .6rem;
    bottom: .6rem;
    overflow: hidden;

    @include utils.filter-glass($radius: 1.6rem);
  }
}

.righttoc {
  column-gap: 2rem;
  z-index: 10;

  &>#pagetoc {
    display: flex;
    flex-direction: column;

    width: var.$pagetoc-width;

    overflow-y: scroll;

    font-family: var.$italic-font;
    font-size: 0.625em;
    font-style: italic;

    border-left: 1px solid var.$color-pink;

    a {
      @include anchor-gradient(to right);

      padding-bottom: 0.5em;
      padding-top: 0.5em;

      &.H1 {
        padding-left: 1em;
      }

      &.H2 {
        padding-left: 2em;
      }

      &.H3 {
        padding-left: 3em;
      }

      &.H4 {
        padding-left: 3.6em;
      }

      &.H5 {
        padding-left: 4.2em;
      }

      &.H6 {
        padding-left: 4.8em;
      }
    }
  }
}

.bottomtoc {
  inline-size: max(0px, calc(100svw - $toc-inline-offset));

  ::-webkit-scrollbar {
    height: var.$scrollbar-webkit-height;
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar);
    border-radius: 1rem;
  }

  &>#pagetoc {
    display: flex;
    flex-direction: row;

    overflow-x: auto;

    font-family: var.$italic-font;
    font-size: .5625em;
    font-style: italic;

    padding: 1em;
    gap: 1em;

    scrollbar-width: thin;

    a {
      display: flex;
      align-items: center;
      white-space: nowrap;

      @include anchor-gradient(to top);
    }
  }
}

#toc-toggle {
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  justify-content: center;
  align-items: center;

  @media (min-width: var.$breakpoint-ui-wide) {
    display: none;
  }
}

@media print {

  .righttoc,
  .bottomtoc {
    display: none;
  }
}
