@import "../globalCssVariables";

.collectionStackingView {
    height: 100%;
    width: 100%;
    position: absolute;
    display: flex;
    top: 0;
    overflow-y: auto;
    flex-wrap: wrap;
    transition: top .5s;

    .collectionStackingView-docView-container {
        width: 45%;
        margin: 5% 2.5%;
        padding-left: 2.5%;
        height: auto;
    }

    .collectionStackingView-flexCont {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .collectionStackingView-masonrySingle,
    .collectionStackingView-masonryGrid {
        width: 100%;
        height: 100%;
        position: absolute;
        display: grid;
        top: 0;
        left: 0;
        width: 100%;
        position: absolute;
    }

    .collectionStackingView-masonrySingle {
        width: 100%;
        height: 100%;
        position: absolute;
        display: flex;
        flex-direction: column;
        top: 0;
        left: 0;
        width: 100%;
        position: absolute;
    }

    .collectionStackingView-description {
        font-size: 100%;
        margin-bottom: 1vw;
        padding: 10px;
        height: 2vw;
        width: 100%;
        font-family: $sans-serif;
        background: $dark-color;
        color: $light-color;
    }

    .collectionStackingView-columnDragger {
        width: 15;
        height: 15;
        position: absolute;
        margin-left: -5;
    }

    .collectionStackingView-columnDoc {
        display: inline-block;
    }

    .collectionStackingView-masonryDoc {
        transform-origin: top left;
        grid-column-end: span 1;
        height: 100%;
    }

    .collectionStackingView-sectionHeader {
        text-align: center;
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px;
        overflow: hidden;

        .editableView-input {
            color: black;
        }

        .editableView-input:hover,
        .editableView-container-editing:hover,
        .editableView-container-editing-oneLine:hover {
            cursor: text
        }

        .collectionStackingView-sectionHeader-subCont {
            outline: none;
            border: 0px;
            color: $light-color;
            letter-spacing: 2px;
            font-size: 75%;
            transition: transform 0.2s;
            position: relative;

            .editableView-container-editing-oneLine,
            .editableView-container-editing {
                color: grey;
                padding: 10px;
            }

            .editableView-input:hover,
            .editableView-container-editing:hover,
            .editableView-container-editing-oneLine:hover {
                cursor: text
            }

            .editableView-input {
                padding: 12px 10px 11px 10px;
                border: 0px;
                color: grey;
                text-align: center;
                letter-spacing: 2px;
                outline-color: black;
            }
        }

        .collectionStackingView-sectionDelete {
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
        }
    }

    .collectionStackingView-addDocumentButton,
    .collectionStackingView-addGroupButton {
        display: inline-block;
        margin: 0 5px;
        overflow: hidden;
        width: 90%;
        color: lightgrey;
        overflow: ellipses;

        .editableView-container-editing-oneLine,
        .editableView-container-editing {
            color: grey;
            padding: 10px;
        }

        .editableView-input:hover,
        .editableView-container-editing:hover,
        .editableView-container-editing-oneLine:hover {
            cursor: text
        }

        .editableView-input {
            outline-color: black;
            letter-spacing: 2px;
            color: grey;
            border: 0px;
            padding: 12px 10px 11px 10px;
        }
    }

    .collectionStackingView-addDocumentButton {
        font-size: 75%;
        letter-spacing: 2px;

        .editableView-input {
            outline-color: black;
            letter-spacing: 2px;
            color: grey;
            border: 0px;
            padding: 12px 10px 11px 10px;
        }
    }

    .collectionStackingView-addGroupButton {
        background: rgb(238, 238, 238);
        font-size: 75%;
        text-align: center;
        letter-spacing: 2px;
        height: fit-content;
    }
}