// Use data attributes to reduce chance of selector collisions

// There are a few lines which contain something like `/* replace-col1-width */`.
// These lines may be targeted and dynamically adjusted via JS.

// For the most part, there are only CSS changes while the user is in the 3-column layout
// which is toggled via an attribute on the <html>:
html[data-cpuserscript-three-columns-layout-open] {

    .hide-preview, // Hide the option to hide the preview while in 3-column layout
    .bottom-share-links, // Hide the useless links at the bottom of the answer list (only noise, and saves vertical space)
    .bottom-notice, // Same as above
    .post-editor > fieldset, // Hide the "community wiki" section
    .everyonelovesstackoverflow // Ad container - if kept, may result in x-overflow inside the post root
    {
        display: none;
    }

    // Hide main scrollbar, since all main page content other than those in the columns are hidden while in 3-column layout
    body {
        overflow-y: hidden;
    }

    $resizer: "[data-cpuserscript-three-columns-post-root] [data-resizer]";
    $first-column: '#mainbar, #post-form[action="/questions/ask/submit"]';
    $second-column: "[data-cpuserscript-three-columns-post-root]";
    $third-column: "[data-cpuserscript-three-columns-post-root] .wmd-preview, [data-cpuserscript-three-columns-edit-mainbar] .wmd-preview";
    #{$resizer} {
        position: fixed;
        height: 100%;
        z-index: 1002; // on top of everything
        // 2px to make sure the border is visible regardless of zoom level, *and* isn't near-invisible due to a possible adjacent scrollbar
        border-left: 2px solid black;
        user-select: none; // otherwise, resizes will result in undesirable text selection
        cursor: col-resize;
        &:nth-last-child(2) {
            left: calc(100% / 3);
            /* replace-resizer1-left */
        }
        &:last-child {
            left: calc(200% / 3);
            /* replace-resizer2-left */
        }
    }
    #{$first-column},
    #{$second-column},
    #{$third-column} {
        position: fixed !important; // For 2nd column, need to override SE's CSS rule of .ps-relative { position: relative !important; }
        top: 50px;
        background-color: var(--white);
        z-index: 1001; // .left-sidebar has a z-index of 1000
        height: calc(100% - 50px);
        padding: 15px;
        // Be able to y-scroll on all 3 columns, though one shouldn't ever have to for the answer textarea (should never be vertical overflow)
        overflow-y: auto;
    }
    #{$first-column} {
        left: 0%;
        width: calc(100% / 3);
        /* replace-col1-width */
    }
    #{$third-column} {
        left: calc(200% / 3);
        /* replace-col3-left */
        width: calc(100% / 3);
        /* replace-col3-width */
    }
    // The below attribute applies to part of the first column, but the attribute is set only on the standalone /edit page,
    // whose structure makes using *only* the [data-cpuserscript-three-columns-post-root] (the second column) to apply rules impossible
    // So, apply a different attribute to a parent element
    [data-cpuserscript-three-columns-edit-mainbar] {
        #revisions-list, .original-question {
            // Default CSS has some width, resulting in horizontal overflow and undesirable x-scrolling on 1st column
            // Need to use !important to override the default style, which has the width set directly on the #revisions-list via JS
            width: unset !important;
        }
    }
    @mixin verticalContainer {
        display: flex;
        flex-direction: column;
    }
    @mixin onlyVerticalChild {
        flex-grow: 1;
    }
    #{$second-column} {
        left: calc(100% / 3);
        /* replace-col2-left */
        width: calc(100% / 3) !important;
        /* replace-col2-width */
        @include verticalContainer;
        &.answer [id^="post-editor"],
        &.question [id^="post-editor"] {
            // When editing an existing post, possibility of y-overflow in the 2nd column due to numerous comments is unavoidable
            height: 70vh;
        }
        &#post-form {
            // Hide the "Your Answer" header:
            > .space {
                display: none;
            }
            > #post-editor {
                // Make the answer textarea take up most of the vertical space, with the Post Your Answer container at the bottom
                @include onlyVerticalChild;
            }
        }
        &.deleted-answer pre {
            &,
            > code {
                background-color: #eff0f1;
            }
        }
        // Hide the grippie bar that allows for resizing the textarea:
        .grippie {
            display: none;
        }
        textarea.wmd-input {
            resize: none;
        }
    } // End of #{$second-column}
    // Still need some conditional rules that apply only inside the second column, though:

    // Make the .wmd-input expand to the full height of the #post-editor* parent
    // Is there a better way than the below code? Setting vertical flex display of every ancestor seems ugly
    @mixin psRelativeTextareaContainer {
        &,
        > .wmd-container {
            .wmd-button-bar {
                margin-top: 0;
            }
            &,
            > .js-stacks-validation {
                @include verticalContainer;
                &,
                > .ps-relative {
                    @include onlyVerticalChild;
                    > .wmd-input {
                        height: 100% !important; // Need to override built-in high specificity
                    }
                }
            }
        }
    }

    // Matches inline editor and new answer editor, or matches editor on new question page
    [data-cpuserscript-three-columns-post-root] [id^="post-editor"],
    #question-form .post-editor[data-cpuserscript-three-columns-post-root],
    #question-answer-section .post-editor[data-cpuserscript-three-columns-post-root] { // Targets the self-answer area on sites other than Stack Overflow
        @include verticalContainer;
        /* A rule to show the community option without breaking the rest of the structure could be put here,
         * but it takes up precious vertical space, and is rarely used, so it'll be hidden entirely instead.
         * User can close the 3-col layout before posting if they want it
         */
        margin-top: 0;
        > .ps-relative {
            @include psRelativeTextareaContainer;
        }
    }
    // Matches edit box on standalone edit page
    .ps-relative[data-cpuserscript-three-columns-post-root] {
        z-index: 1002; // Needed to make the second resizer selectable
        @include psRelativeTextareaContainer;
    }
    // By default, deleted answers receive `margin-left: -24px;` to widen the color of the deleted-background
    // but that throws things off the 3 cols layout, so it gets reset here
    .deleted-answer {
        margin-left: inherit;
    }
}

.realtime-post-deleted-notification + [data-cpuserscript-three-columns-post-root] {
    // If a post is deleted while you're editing it, don't blank out the whole interface
    opacity: 1 !important; // Override the `opacity: 0.1` set directly on the element via SE's JS
    background-color: #f4eaea !important;
}

button[data-cpuserscript-three-columns-toggle] {
    /* Want to put the button on the right of the postBottomContainer (see createToggleButton.ts),
     * but postBottomContainer may or may not have display: flex
     * margin-left: auto is effective when flex is being used - otherwise, float: right does it
     */
    float: right;
    margin-left: auto;
    /* On /ask, because the button is floating and there's nothing to the left of it,
     * the z-index allows the lower part of the button to remain clickable, rather than being in the shadow of the Tags container
     */
    z-index: 1;
}
