/*
 * #big-pane
 * Everything besides the menu.
 */
#big-pane {
    justify-content: left;
    position: relative;
    @include min-screen($W_BOOK_TEXT_MAX) {
        justify-content: center;
    }
}
@include min-screen($S_MENU) {
    #big-pane {
        @include size(margin-left, $W_MENU);
    }
    .menu-hidden {
        #big-pane {
            margin-left: 0;
        }
    }
}

#picture-viewer #big-pane {
    @include size(margin-left, $W_NONUMBERS_TINY);

    @include min-screen($S_NONUMBERS_TINY_MAX) {
        @include size(margin-left, $W_NONUMBERS);
    }

    @include min-screen($S_NUMBERS) {
        @include size(margin-left, 44px);
    }
}

@include min-screen($S_MENU) {
    #picture-viewer #big-pane {
        @include size(margin-left, $W_MENU);
    }
    .menu-hidden {
        #big-pane {
            margin-left: 44px;
        }
    }
}




/*
 * #main-text
 *
 * This is where the text lives
 * together with line numbers, themes and stuff.
 */

@mixin left-without-numbers {
    @include size(padding-left, $W_NONUMBERS_TINY);
    @include min-screen($S_NONUMBERS_TINY_MAX) {
        @include size(padding-left, $W_NONUMBERS);
    }
}

@mixin right-without-themes {
    @include size(padding-right, $W_NOTHEMES_TINY);
    @include min-screen($S_NOTHEMES_TINY_MAX) {
        @include size(padding-right, $W_NOTHEMES_SMALL);
    }
    @include min-screen($S_NOTHEMES_SMALL_MAX) {
        @include size(padding-right, $W_NOTHEMES);
    }
}

#main-text, #other-text {
    @include left-without-numbers;
    @include right-without-themes;
    @include size(min-width, $W_BOOK_TEXT_MIN);

    /* make room for line numbers */
    @include min-screen($S_NUMBERS) {
        @include size(padding-left, $W_NUMBERS);
    }

    /* make room for themes */
    @include min-screen($S_THEMES) {
        @include size(padding-right, $W_THEMES);
    }
}

.always-hide-line-numbers {
    /* Cancel making room for line numbers. */
    #main-text, #other-text {
        @include left-without-numbers;
    }
}

@include min-screen($S_THEMES) {
    .always-hide-themes {
        /* Cancel making room for themes. */
        #main-text, #other-text {
            @include right-without-themes;
        }
    }
}

.with-other-text {
    #big-pane {
        display: flex;
        flex-direction: row;
    }
    #main-text, #other-text {
        @include right-without-themes;

        @include min-screen($S_THEMES_WOTHER) {
            @include size(padding-right, $W_THEMES);
        }
    }
}





#book-text {
    @include size(max-width, $W_BOOK_TEXT_MAX);
    @include size(margin, 20px auto 30px);

    font-size: .8em;

    @include min-screen($S_SMALL_TEXT_MAX) {
        font-size: 1em;
    }

    h1 {
        margin-top: 0;
    }
}
.with-other-text {
    #book-text {
        font-size: .8em;
        @include min-screen($S_SMALL_TEXT_MAX_WOTHER) {
            font-size: 1em;
        }
    }
}