@use 'fonts';
@use 'headline';

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

@view-transition {
  navigation: auto;
}

:root {
  --breakpoint-ui-wide: #{var.$breakpoint-ui-wide};
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

body {
  display: flex;
  flex-direction: column;

  margin-top: 0;

  color: var(--fg);
  background-color: var(--bg);

  font-family: var.$base-font;

  scrollbar-color: var(--scrollbar) var(--bg);

  &::-webkit-scrollbar {
    width: var.$scrollbar-webkit-width;
  }

  &::-webkit-scrollbar-track {
    background-color: var(--bg);
  }

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

  @media (min-resolution: 2dppx) {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

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

#top-bar {
  flex-basis: var.$menu-bar-height;

  #menu {
    height: var.$menu-bar-height;
    display: flex;
    align-items: center;
    gap: 0.8rem;

    background-color: var(--bg);

    z-index: 30;
    opacity: 0.92;

    @media (min-width: var.$breakpoint-ui-wide) {
      position: fixed;
      width: 100dvw;
    }

    #left-buttons {
      min-width: 0;
      margin-left: 1rem;
      display: flex;
      gap: 0.8rem;
    }

    #book-title {
      flex: 1;
      color: var(--icons);
      font-family: var.$italic-font;
      font-size: 0.7em;
      font-style: italic;
      text-align: right;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #right-buttons {
      margin-right: 2rem;

      &>a {
        text-decoration: none;
        color: inherit;
      }
    }
  }
}

#page {
  display: grid;

  @media (min-width: var.$breakpoint-ui-wide) {
    grid-template-columns: 1fr var.$pagetoc-width;

    &.show-sidebar {
      grid-template-columns: var.$sidebar-width 1fr var.$pagetoc-width;
    }
  }
}

#sidebar {
  scrollbar-color: var(--scrollbar) var(--bg);

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

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

  @media (max-width: var.$breakpoint-ui-wide) {
    position: fixed;
    top: calc(var.$menu-bar-height + env(safe-area-inset-top));
    height: calc(99dvh - (var.$menu-bar-height + env(safe-area-inset-top)));
    z-index: 50;

    @include utils.filter-glass();
  }

  #sidebar-scrollbox {
    width: var.$sidebar-width;
    height: 100%;

    overflow-y: scroll;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    contain: layout style paint;

    @media (min-width: var.$breakpoint-ui-wide) {
      position: fixed;
      height: calc(100dvh - var.$scrollbox-shift);
    }

    &>ol {
      margin-bottom: 2em;
      padding-left: 1em;
      line-height: 2.2;

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

      ol {
        padding-left: 0.7em;
      }

      li {
        list-style-type: none;

        &>a {
          display: block;
          color: var(--sidebar-fg);
          text-decoration: none;

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

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

        &.part-title {
          color: var(--sidebar-fg);
          margin: 1.2rem auto 0.2rem;
          font-weight: bold;
          background: linear-gradient(to right, var.$color_pink, var(--sidebar-bg));
          background-repeat: no-repeat;
          background-size: 100% 0.1rem;
          background-position: bottom;
        }
      }
    }
  }
}

main {
  min-width: 0;
  margin: 0 0.8rem;

  @media (max-width: var.$breakpoint-ui-wide) {
    margin: 1.6rem 0.8rem;
  }
}

article {
  font-size: var.$base-font-size;
  font-feature-settings: "palt";
  letter-spacing: normal;
  line-height: 1.6;
  word-break: auto-phrase;

  code {
    &:not(pre code) {
      font-size: 0.82em;

      color: var(--inline-code-color);
      background-color: var(--quote-bg);

      padding: .1em .4em;
      border-radius: 0.4em;
    }
  }

  a {

    &:link,
    &:visited {
      color: var(--links);
      margin-left: 0.2em;
      margin-right: 0.2em;
    }

    &.header {
      color: var(--fg);
      text-decoration: none;
    }
  }

  img,
  video {
    display: flex;
    margin: 1rem auto;
    border-radius: 0.4rem;
    max-width: 100%;
    height: auto;
  }

  audio {
    display: flex;
    margin: 1rem auto;
    width: 70%;
  }

  &>#nav-wrapper {
    display: flex;

    margin-top: 2em;
    margin-bottom: 2em;

    &>.chapters {
      display: flex;
      align-items: center;

      font-size: 0.82em;
      text-align: center;
      text-decoration: none;

      max-width: 50%;
      padding: 1em;
      border-radius: 0.8rem;
      background-color: var(--sidebar-bg);

      &:hover {
        background-color: var(--toc-bg);
      }
    }

    &>#prev {
      margin-right: auto;
    }

    &>#next {
      margin-left: auto;
    }
  }
}

.compact-container {
  display: none;

  @media (max-width: var.$breakpoint-ui-wide) {
    position: fixed;
    display: flex;

    justify-content: center;
    align-items: center;
    gap: 0.4rem;

    top: calc(env(safe-area-inset-top) + 0.1rem);
    padding: 0.4rem;
    z-index: 40;

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