@font-face {
    font-family: "Fira_Sans";
    src: url(../../../assets/fonts/Fira_Sans/FiraSans-Regular.ttf) format("truetype");
}

@font-face {
    font-family: "Lato";
    src: url(../../../assets/fonts/Lato/Lato-Regular.ttf) format("truetype");
}

@font-face {
    font-family: "Libre_Baskerville";
    src: url(../../../assets/fonts/Libre_Baskerville/LibreBaskerville-Regular.ttf) format("truetype");
}

@font-face {
    font-family: "Merriweather";
    src: url(../../../assets/fonts/Merriweather/Merriweather-Regular.ttf) format("truetype");
}

@font-face {
    font-family: "Nanum_Gothic";
    src: url(../../../assets/fonts/Nanum_Gothic/NanumGothic-Regular.ttf) format("truetype");
}

@font-face {
    font-family: "RocknRoll_One";
    src: url(../../../assets/fonts/RocknRoll_One/RocknRollOne-Regular.ttf) format("truetype");
}

$dark-form-background-no-opacity: rgb(1, 4, 9);
$primary-color: #0062cc;

.control-container {
    padding-bottom: 5px;
}

.table-of-contents li {
    cursor: pointer;

    &.active {
        font-weight: bold;
    }
}

.page-stub {
    margin-top: 6px;
    padding-left: 2px;
    padding-right: 2px;
}

.fixed-top {
    z-index: 1022;
}

.dark-mode {

    color: #dcdcdc !important;
    background-image: none !important;
    background-color: #292929 !important;

    *:not(code), *:not(a) {
        background-color: #292929;
        box-shadow: none;
        text-shadow: none;
        border-radius: unset;
        color: #dcdcdc !important;
    }

    *:not(input), *:not(code), *:not(:link) {
        color: #dcdcdc !important;
    }

    code {
        color: #e83e8c !important;
    }

    .btn-icon {
        background-color: transparent;
    }

    :link, a {
        color: #8db2e5 !important;
    }

    img, img[src] {
        z-index: 1;
        filter: brightness(0.85) !important;
        background-color: initial !important;
    }
      
    :visited, :visited *, :visited *[class] {color: rgb(211, 138, 138) !important}
    :link:not(cite), :link *:not(cite) {color: #8db2e5 !important}
}

.reading-bar {
    background-color: white;
    overflow: hidden;
    box-shadow: 0 0 6px 0 rgb(0 0 0 / 70%);
}

.dark-mode {
    .reading-bar, .book-title, .drawer-body, .drawer-container {
        background-color: $dark-form-background-no-opacity;
    }
    button {
        background-color: $dark-form-background-no-opacity;
    }

    .btn {
        &.btn-secondary {
            border-color: transparent;
    
            &:hover, &:focus {
                border-color: #545b62;
            }
        }
        
        &.btn-outline-secondary {
            border-color: transparent;
    
            &:hover, &:focus {
                border-color: #545b62;
            }
        }
    
        span {
            background-color: unset;
        }
    
        i {
            background-color: unset;
        }
    }
}

::ng-deep .dark-mode .drawer-container {
    .header, body, *:not(.progress-bar) {
        background-color: $dark-form-background-no-opacity !important;
    }
}

@media(max-width: 875px) {
    .book-title {
        display: none;
    }
    
} 

.book-title {
    margin-top: 10px;
    text-align: center;
    text-transform: capitalize;
}

.reading-section {
    max-height: 100vh;
    width: 100%;
    //overflow: auto;  // This will break progress reporting
}

.reader-container {
    outline: none; // Only the reading section itself shouldn't receive any outline. We use it to shift focus in fullscreen mode
    overflow: auto;
}

.book-content {
    position: relative;
}

// A bunch of resets so books render correctly
::ng-deep .book-content {
    & a, & :link {
        color: blue;
    }
}

.drawer-body {
    padding-bottom: 20px;
}

.chapter-title {
    padding-inline-start: 0px
}

::ng-deep .scale-width {
    max-width: 100%;
    object-fit: contain;
    object-position: top center;
}


// Click to Paginate styles
.icon-primary-color {
    color: $primary-color;
}

.dark-mode .overlay {
    opacity: 0;
}


.right {
    position: fixed;
    right: 0px;
    top: 0px;
    width: 20%;
    height: 100%;
    z-index: 2;
    cursor: pointer;
    opacity: 0;
    background: transparent;
}

.left {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 20%;
    height: 100%;
    z-index: 2;
    cursor: pointer;
    opacity: 0;
    background: transparent;
}

.highlight {
    background-color: rgba(65, 225, 100, 0.5) !important;
    animation: fadein .5s both;
}
.highlight-2 {
  background-color: rgba(65, 105, 225, 0.5) !important;
  animation: fadein .5s both;
}

.btn {
    &.btn-secondary {
        color: #6c757d;
        border-color: transparent;
        background-color: unset;

        &:hover, &:focus {
            border-color: #545b62;
        }
    }
    
    &.btn-outline-secondary {
        border-color: transparent;
        background-color: unset;

        &:hover, &:focus {
            border-color: #545b62;
        }
    }

    span {
        background-color: unset;
        color: #6c757d;
    }

    i {
        background-color: unset;
        color: #6c757d;
    }

    &:active {
        * {
            color: white;
        }
    }
}
