/* You can add custom styles here. */

// @import "plugins/numbered";

img.image-floatleft, img[src$='#floatleft'] {
    float: left;
    margin: 0.7rem;
    /* this margin is totally up to you */
    /* whatever else styles you fancy here */
}

img.image-floatright, img[src$='#floatright'] {
    float: right;
    margin: 0.7rem;
    /* this margin is totally up to you */
    /* whatever else styles you fancy here */
}

img.image-center, img[src$='#center'] {
    float: none;
    display: block;
    margin: 0.7rem auto;
    /* you can replace the vertical '0.7rem' by
                            whatever floats your boat, but keep the
                            horizontal 'auto' for this to work */
    /* whatever else styles you fancy here */
}

h1, h2, h3, h4, h5, sup, li[id^="fn:"] {
    scroll-margin-top: 72px;
}

.footer {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset;
    padding: 10px 0px;
    width: 100%;
    font-size: smaller;
    line-height: 3.2ex;
    color: var(--gray-500);
    text-decoration: none;
}

.footer a {
    text-decoration: none;
    color: var(--gray-800);
}

.kerning {
    padding: 0 2px;
}

.footnotes {
    hr {
        margin-top: 2em;
        margin-bottom: 4em;
    }

    hr::after {
        content: "注释";
        display: block;
        font-size: 1.5em;
        font-weight: 700;
        padding-top: 0.5em;
    }
}

.footnote-ref {
    margin: 1pt;
}

rt {
    font-size: 65%;
}

.hidden-text {
    background-color: var(--body-font-color);
}

.hover-change {
    display: flex;
    position: relative;
    transition: opacity 0.4s linear;

    &:hover {
        .hover-change-before {
            opacity: 0;
        }

        .hover-change-after {
            opacity: 1;
            margin-left: initial;
        }
    }

    .hover-change-before {
        display: inline-block;
        position: static;
        transition: inherit;
    }

    .hover-change-after {
        display: inline-block;
        opacity: 0;
        position: absolute;
        width: 100%;
        transition: inherit;
    }
}

.hover-change-after:hover {
    opacity: 0;
    margin-left: -9999px;
}

.book-menu-separator {
    margin: 0.5rem 0;
    border-top: 1px solid var(--gray-200);
}

@media screen and (max-width: $mobile-breakpoint) {
    .book-page {
        padding: 0px 1rem;
    }
    .book-header {
        position: sticky;
        top: 0;
        padding: 1rem;
        margin: 0 -1rem 1rem -1rem;
        z-index: 9990;
        background: var(--body-background);
    }
    .book-header:not(:first-child) {
        box-shadow: 0 5.5;
    }

    .book-menu-checked {
        visibility: initial;
    }

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

    .book-page-checked {
        opacity: 0.25;
    }
    
    .book-menu-overlay-checked {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .book-toc-overlay-checked {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(255, 255, 255, 0.3);
    }

    .book-header-checked {
      display: block;
    }

    h1, h2, h3, h4, h5, sup {
        scroll-margin-top: 72px;
    }
}

// Mobile hint and Auto Columns
// Default case: no hint, wide columns

.mobile-hint {
  display: none;
}

.auto-columns-wide {
  display: flex;
}

.auto-columns-narrow {
  display: none;
}

// Shrink when the screen is narrow enough

@media screen and (max-width: $mobile-warning-breakpoint-large) and (min-width: $mobile-breakpoint), 
       screen and (max-width: $mobile-breakpoint) and (max-width: $mobile-warning-breakpoint-small) {
  .mobile-hint {
    display: block;
  }

  .auto-columns-wide {
    display: none
  }
  
  .auto-columns-narrow {
    display: block;
  }
}

// Scroll buttons
.scroll-buttons {
  position: fixed;
  right: 8px;
  cursor: pointer;
  opacity: 0.7;
  user-select: none;
  bottom: 32px;
  left: unset;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;

  &:hover {
    opacity: 1;
  }
}