@use 'sass:math';

/**************************** BASE - MOBILE AND DESKTOP */
.l-multipane {
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;

    &--horizontal,
    > .l-pane {
        flex-flow: row nowrap;
    }

    &--vertical,
    > .l-pane  {
        flex-flow: column nowrap;
    }

    &--vertical {
        height: 100%;
        > .l-pane .l-pane__contents {
            padding-right: $interiorMarginSm; // Fend off scrollbar
        }
    }
}

.l-pane {
    backface-visibility: hidden;
    display: flex;
    min-width: 0px;
    min-height: 0px;
    opacity: 1;
    pointer-events: inherit;

    &__handle,
    &__label {
        // __handle and __label don't appear in mobile
        display: none;
    }

    &__header {
        display: flex;
        align-items: center;
        @include desktop() { margin-bottom: $interiorMargin; }

        [class*="button"] {
            color: $colorBtnMajorBg;
        }
    }

    &--reacts {
        // This is the pane that doesn't hold the handle
        // It reacts to other panes that are able to resize
        flex: 1 1 0;
    }

    &--collapsed {
        flex-basis: 0px !important;
        transition: all 350ms ease;

        .l-pane__contents {
            transition: opacity 150ms ease;
            opacity: 0;
            pointer-events: none;
            overflow: hidden;

            > * {
                min-width: 0 !important;
                min-height: 0 !important;
            }
        }
    }

    &[class*="--horizontal"] {
        padding-left: $interiorMargin;
        padding-right: $interiorMargin;
        &.l-pane--collapsed {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
    }

    &[class*="--vertical"] {
        padding-top: $interiorMargin;
        padding-bottom: $interiorMargin;
        &.l-pane--collapsed {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }
    }

    /************************ CONTENTS */
    &__contents {
        flex: 1 1 100%;
        opacity: 1;
        pointer-events: inherit;
        transition: opacity 250ms ease 250ms;

        .l-pane__contents {
            // Don't pad all nested __contents
            padding: 0;
        }
    }

    /************************************************ DESKTOP STYLES */
    body.desktop & {
        &__handle {
            background: $colorSplitterBg;
            display: block;
            position: absolute;
            transition: $transOut;

            &:before {
                // Extended hit area
                content: '';
                display: block;
                position: absolute;
                z-index: -1;
            }

            &:hover {
                background: $colorSplitterHover;
                transition: $transIn;
            }
        }

        &__header {
            font-size: floor(12px * .9);
        }

        &__label {
            // Name of the pane
            @include ellipsize();
            @include userSelectNone();
            color: $splitterBtnLabelColorFg;
            display: block;
            text-transform: uppercase;
            flex: 1 1 auto;
        }

        [class*="expand-button"] {
            display: none; // Hidden by default
            background: $splitterCollapsedBtnColorBg;
            color: $splitterCollapsedBtnColorFg;
            font-size: 0.9em;

            &:hover {
                background: $splitterCollapsedBtnColorBgHov;
                color: inherit;
                transition: $transIn;
            }
        }

        &--resizing {
            // User is dragging the handle and resizing a pane
            @include userSelectNone();

            + .l-pane {
                @include userSelectNone();
            }

            .l-pane {
                &__handle {
                    background: $colorSplitterHover;
                }
            }
        }

        &[class*="--collapsed"] {
            /********************************* STYLES FOR DESKTOP COLLAPSED PANES, ALL ORIENTATIONS */
            $d: nth($splitterBtnD, 1);
            flex-basis: $d;
            min-width: $d;
            min-height: $d;

            > .l-pane__handle {
                display: none;
            }

            [class*="collapse-button"] {
                display: none;
            }

            [class*="expand-button"] {
                display: block;
            }
        }

        &[class*="--horizontal"] {
            > .l-pane__handle {
                cursor: col-resize;
                top: 0;
                bottom: 0;
                width: $splitterHandleD;

                &:before {
                    // Extended hit area
                    top: 0;
                    right: $splitterHandleHitMargin * -1;
                    bottom: 0;
                    left: $splitterHandleHitMargin * -1;
                }
            }

            .l-pane__collapse-button {
                &:before {
                    content: $glyph-icon-line-horz;
                }
            }

            &[class*="--collapsed"] {
                /************************ COLLAPSED HORIZONTAL SPLITTER, EITHER DIRECTION */
                [class*="__header"] {
                    display: none;
                }

                [class*="expand-button"] {
                    position: absolute;
                    top: 0; right: 0; bottom: 0; left: 0;
                    height: auto; width: 100%;
                    padding: $interiorMargin 2px;

                    [class*="label"] {
                        text-orientation: mixed;
                        text-transform: uppercase;
                        writing-mode: vertical-lr;
                    }
                }
            }

            /************************** Horizontal Splitter Before */
            // Example: Inspector pane
            &[class*="-before"] {
                margin-left: nth($shellPanePad, 2);
                padding-left: nth($shellPanePad, 2);

                > .l-pane__handle {
                    left: 0;
                    transform: translateX(floor(math.div($splitterHandleD, -2))); // Center over the pane edge
                }

                [class*="expand-button"] {
                    border-top-left-radius: $controlCr;
                    border-bottom-left-radius: $controlCr;
                }
            }

            /************************** Horizontal Splitter After */
            // Example: Tree pane
            &[class*="-after"] {
                margin-right: nth($shellPanePad, 2);
                padding-right: nth($shellPanePad, 2);

                > .l-pane__handle {
                    right: 0;
                    transform: translateX(floor(math.div($splitterHandleD, 2)));
                }

                [class*="expand-button"] {
                    border-top-right-radius: $controlCr;
                    border-bottom-right-radius: $controlCr;
                }
            }
        }

        &[class*="--vertical"] {
            // l-pane--vertical

            > .l-pane__handle {
                cursor: row-resize;
                left: 0;
                right: 0;
                height: $splitterHandleD;

                &:before {
                    // Extended hit area
                    left: 0;
                    top: $splitterHandleHitMargin * -1;
                    right: 0;
                    bottom: $splitterHandleHitMargin * -1;
                }
            }

            /************************** Vertical Splitter Before */
            // Pane collapses downward. Used by Elements pool in Inspector
            &[class*="-before"] {
                $m: $interiorMarginLg;
                margin-top: $m;
                padding-top: $m;
                > .l-pane__handle {
                    top: 0;
                    transform: translateY(floor(math.div($splitterHandleD, -1)));
                }

                .l-pane__collapse-button:before {
                    content: $glyph-icon-arrow-down;
                }

                &.l-pane--collapsed {
                    > .l-pane__collapse-button {
                        transform: scaleY(-1);
                    }
                }
            }

            /************************** Vertical Splitter After */
            // Pane collapses upward. Not sure we'll ever use this...
            &[class*="-after"] {
                > .l-pane__handle {
                    bottom: 0;
                    transform: translateY(floor(math.div($splitterHandleD, 1)));
                }

                &:not(.l-pane--collapsed) > .l-pane__collapse-button {
                    &:after {
                        transform: scaleY(-1);
                    }
                }
            }
        }
    } // Ends .body.desktop
} // Ends .l-pane
