/* ---------------------------------
 *        Back to Top Button
 * --------------------------------- */
#back-to-top
    position: fixed
    opacity: 0
    outline: none
    padding: 8px 0
    line-height: 24px
    border-radius: $card-radius
    transform: translateY(120px)
    transition: .4s ease opacity, .4s ease width, .4s ease transform, .4s ease border-radius

    &.is-rounded
        border-radius: 50%

    &.fade-in
        opacity: 1

    &.rise-up
        transform: translateY(0)

/* ---------------------------------
 *          Gallery Plugin
 * --------------------------------- */
.gallery-item
    .caption
        color: $grey

/* ---------------------------------
 *      Table of Content Widget
 * --------------------------------- */
+mobile()
    #toc
        display: none
        position: fixed
        margin: 1rem
        left: 0
        right: 0
        bottom: 0
        z-index: 100
        max-height: calc(100vh - 2rem)
        overflow-y: auto

    #toc-mask
        display: none
        position: fixed
        top: 0
        left: 0
        right: 0
        bottom: 0
        z-index: 99
        background: rgba(0, 0, 0, .7)

    #toc, #toc-mask
        &.is-active
            display: block

/* ---------------------------------
 *      Page Loading Progressbar
 * --------------------------------- */
.pace
    user-select: none
    pointer-events: none

    .pace-progress
        top: 0
        right: 100%
        width: 100%
        height: 2px
        z-index: 2000
        position: fixed
        background: $primary

.pace-inactive
    display: none

/* ---------------------------------
 *       Fix FontAwesome Icons
 * --------------------------------- */
.fa, .fab, .fal, .far, .fas
    line-height: inherit

/* ---------------------------------
 *       MathJax and KaTeX
 * --------------------------------- */
.MathJax, .katex-display
    overflow-x: auto
    overflow-y: hidden

.katex
    white-space: nowrap

.katex-display
    margin-top: -1em !important

.katex-html
    padding-top: 1em

    .tag
        align-items: unset
        background-color: unset
        border-radius: unset
        color: unset
        display: unset
        font-size: unset
        height: unset
        justify-content: unset
        line-height: unset
        padding-left: unset
        padding-right: unset
        white-space: unset

/* ---------------------------------
 *         Cookie Consent
 * --------------------------------- */
.cc-window, .cc-revoke
    font-size: 1.1rem !important
    font-family: $family-sans-serif !important

.cc-window
    color: $text !important
    background-color: $scheme-main !important

    &.cc-floating
        border-radius: $card-radius
        box-shadow: $card-shadow

    &.cc-banner
        background-color: darken($scheme-main, 2.5%) !important

    &.cc-theme-block, &.cc-theme-classic
        .cc-compliance > .cc-btn
            border-radius: $radius-rounded

    .cc-compliance > .cc-btn
        font-weight: 400
        border: none
        color: $primary-invert
        background-color: $primary

        &:hover, &:focus
            background-color: darken($primary, 2.5%)

        &.cc-deny
            &:hover
                color: $primary
                text-decoration: none

.cc-revoke
    padding: .5rem 1rem !important
    color: $primary-invert !important
    background-color: $primary !important

    &:hover
        text-decoration: none !important
        background-color: darken($primary, 2.5%)