@keyframes timed-fadeout {
    0% {
        opacity: 1;
    }

    95% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

$form_width: 30rem;
$action_button_width: 4rem;
$form_overall_width = $form_width + $action_button_width + 0.25rem; /* 0.25rem for right border on toolbox */

body.content-type-dataeditor {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    max-width: 100%;

    /* elements to completely hide */
    & > section.dashbar, /* user dashbar */
    & > header, /* sidebar w/ logo, main menu, search form */
    & > main > header, /* main header */
    & > main > footer {
        display: none;
    }

    & > main {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;

        section.messages {

            &:before {
                background: red;
                width: 1rem;
                height: 1rem;
                content: "!";
                opacity: 1;
            }

            position: fixed;
            z-index: 100;
            top: 3.25rem;
            background: desaturate($color_highlight, 50);
            animation: timed-fadeout 10s linear 1;
            opacity: 0;
            pointer-events: none;
        }
    }

    form.content-type-dataeditor {

        & > .controls {
            margin: 0;
            padding: 0;
        }

        & > .content {

            margin: 0;
            padding: 0;
            
            display: flex;
            flex-flow: row wrap;

            background: transparent;

            .display-wrapper,
            .form-wrapper {
                margin: 0;
                box-sizing: border-box;

                & > article.content-type-tabbedfieldsets {

                    & > .content {

                        margin: 0;
                        padding: 0;
                        height: 100%;
                        background: transparent;

                        section.tab {
                            overflow-y: auto;
                        }

                    }
                }
            }

            .display-wrapper {
                flex-basis: calc(100% - #{$form_overall_width});
                flex-shrink: 1;
                flex-grow: 4;
                min-width: 360px; /* FIXME: This shouldn't just be the min xres, should it? */

                & > article.content-type-tabbedfieldsets {

                    & > .content {

                        & > section.tab {

                            height: calc(100vh - 3rem); /* tab-nav is 3rem high */

                            &.idx-0 { /* first tab of display is always the plot (if any) has sizing/overflow issues */
                                overflow: hidden;

                                & > fieldset {
                                    height: 100%;

                                    & > .renderable-wrapper {
                                        height: 100%;

                                        & > article {
                                            height: 100%;

                                            & > .content {
                                                margin: 0;
                                                padding: 0;
                                                height: 100%;
                                            }
                                        }
                                    }
                                }
                            }

                            & > fieldset {
                                margin: 0;
                                padding: 0;
                                min-height: 100%;
                                background: transparent;
                                border: none;

                                & > header,
                                article > header {
                                    display: none;
                                }

                                &.table-wrapper {
                                    background: $color_background_dark;
                                }
                            }
                        }
                    }
                }
            }

            .form-wrapper {

                flex-basis: $form_overall_width;
                flex-shrink: 1;
                flex-grow: 1;

                section.tab {
                    background: $color_background_dark;
                    height: calc(100vh - 3rem);

                    fieldset.action-control {

                        display: flex;
                        flex-direction: row;
                        padding: 0;
                        margin: 0;
                        border: 0 none;
                        background: transparent;

                        & > header {
                            display: none;
                        }

                        fieldset.toolbox {

                            flex-basis: $action_button_width + 0.25rem;
                            flex-grow: 1;
                            flex-shrink: 1;

                            max-width: $action_button_width + 0.25rem;
                            padding: 0;
                            margin: 0;
                            border: 0 none;
                            border-right: 0.25rem solid $color_background_light;
                            box-sizing: border-box;
                            
                            height: calc(100vh - 3.25rem); /* tab-nav is 3rem high, border-top on container is 0.25rem */
                            
                            background: transparent;

                            & > header {
                                display: none;
                            }

                            & > button,
                            & > .fake-button {

                                width: $action_button_width;
                                height: $action_button_width;
                                margin: 0;
                                margin-bottom: 0.25rem;
                                padding: 0;
                                color: transparent;

                                &.active,
                                &:hover,
                                &:focus {
                                    background-color: transparentize($color_highlight, 0.7);
                                }

                                &.layer_add {
                                    background-image: url('/theme/icons/layers.svg#add');
                                }

                                &.layer_edit {
                                    background-image: url('/theme/icons/layers.svg#edit');
                                }

                                &.layer_delete {
                                    background-image: url('/theme/icons/layers.svg#delete');
                                }

                                &.base_edit {
                                    background-image: url('/theme/icons/data.svg#edit');
                                }

                                &.join {
                                    background-image: url('/theme/icons/data.svg#join');
                                }

                                &.column_add {
                                    background-image: url('/theme/icons/data.svg#add');
                                }

                                &.column_edit {
                                    background-image: url('/theme/icons/data.svg#edit');
                                }

                                &.filter {
                                    background-image: url('/theme/icons/data.svg#filter');
                                }

                                &.column_delete {
                                    background-image: url('/theme/icons/data.svg#delete');
                                }
                            }
                        }

                        fieldset.action {
                            flex-grow: 10;
                            flex-shrink: 1;
                            flex-basis: calc(#{$form_width} - #{$action_button_width});

                            padding: 0;
                            margin: 0;
                            border: 0 none;
                            background: transparentize($color_highlight, 0.7); 

                            & > fieldset {
                                background: transparent;
                            }
                        }
                    }
                }
            }

            .dataeditor-plot {
                height: 100%;
            }
        }
    }
}
