/*
 * Brochure flipbook. Hoort bij scripts/brochure.js en
 * Views/Partials/NestedContent/_Brochure.cshtml.
 *
 * Staat los van styles.scss omdat het component zelfstandig is en zo mee
 * verhuist met de partial.
 */

/* Tijdens het omslaan tekent de flipbook even buiten zijn eigen breedte, wat
   onderaan de pagina een horizontale scrollbalk deed verschijnen. clip houdt dat
   tegen zonder er een scrollcontainer van te maken, wat overflow: hidden wel doet
   en wat dan een verticale scrollbalk zou opleveren. */
.brochure {
    overflow-x: clip;
}

.brochure__book {
    margin: 0 auto;
}

/* Voor de flipbook opgebouwd is staan de bladen nog als losse divs onder elkaar. */
.brochure:not(.is-ready) .brochure__book {
    display: none;
}

.brochure__leaf {
    background-color: #fff;
    overflow: hidden;
}

/* Zolang een blad niet getekend is tonen we een vlak in plaats van een leeg canvas. */
.brochure__leaf:not(.is-rendered) {
    background-color: #e9ecef;
}

.brochure__leaf canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.brochure__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
}

.brochure__label {
    font-family: "Oswald", sans-serif;
    color: #8a97a7;
    margin: 0 1rem;
    min-width: 5rem;
    text-align: center;
}

.brochure__status {
    text-align: center;
    color: #8a97a7;
    padding: 2rem 0;
}

.brochure__download {
    display: block;
    text-align: center;
    margin-top: 1rem;
}

.brochure.is-fullscreen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #1a2438;
    padding: 2rem;
}

.brochure.is-fullscreen .brochure__download {
    display: none;
}