/* You can add custom styles here. */

// Addons

@import 'plugins/numbered';
@import 'plugins/scrollbars';
@import 'plugins/lightbox';
@import 'plugins/bagdes';
@import 'plugins/meter';
@import 'plugins/toc';
@import 'plugins/table-sort';
@import 'plugins/diagrams';
@import 'colors';
@import 'dashboard';
@import 'katex';
@import 'icons';
@import 'code';
@import 'utils-custom';

input.toggle {
  height: 20px;
  width: 20px;
  overflow: hidden;
  opacity: 1;
  position: fixed;
  visibility: hidden;
}

.markdown {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    a:first-child {
      flex-grow: 2;
      color: inherit;
      text-decoration: none;
      &:visited {
        color: inherit;
      }
      &:hover {
        text-decoration: none;
        &::after {
          font-size: 70%;
          padding-left: 0.3em;
          color: var(--color-link);
          content: ' #';
        }
      }
    }
  }
}

.markdown .permalink {
  color: inherit;
  text-decoration: none;
  &:visited {
    color: inherit;
  }
  &:hover {
    text-decoration: none;
    &::after {
      font-size: 90%;
      padding-left: 0.3em;
      color: var(--color-link);
      content: ' #';
    }
  }
}

// Tweaks
html {
  scroll-behavior: auto;
  touch-action: auto;
}
.container {
  margin-left: 20rem;
  overflow-x: hidden;
}

summary {
  outline: none;
}

blockquote {
  overflow: auto;
}

.book-page {
  max-width: 52rem;
  margin: 0 auto;
}
.book-menu nav {
  width: 20rem;
  overflow: hidden;
}

.book-menu > nav > ul {
  height: 90vh;
  overflow: auto;
}

.book-brand img {
  height: 40px;
  width: auto;
  vertical-align: middle;
  margin-inline-end: 0.5rem;
}

.book-header label {
  height: 43px;
  width: 43px;
  display: flex;
  align-items: center;
}

.book-menu {
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  height: 100%;
  width: 20rem;
  visibility: initial;
  margin-inline-start: initial;
  transition: 0.2s ease-in-out;
  transition-property: transform;
  will-change: transform;
}

@media screen and (max-width: 56rem) {
  .container {
    margin-left: 0;
  }
  .book-menu {
    transform: translateX(-20rem);
  }
  #menu-control:checked ~ main .book-page {
    opacity: initial;
  }

  #menu-control:checked ~ .book-menu {
    transform: translateX(0);
    box-shadow: 0 0 $padding-8 rgba(0, 0, 0, 0.1);
  }

  #menu-control:checked ~ .book-menu-overlay {
    display: block;
    position: fixed;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.4);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .toc-label {
    font-weight: 700;
    font-size: 10px;
    .gg-menu-motion {
      display: none;
    }
  }
  .book-header {
    margin-bottom: 2rem;
    position: fixed;
    width: 100%;
    background: white;
    z-index: 1;
    padding: 5px 0.6rem;
    box-shadow: 1px 0 2px 0px rgba(0, 0, 0, 0.2);
  }
  #toc-depth-slider {
    display: none;
  }
}
