@prefix: graphjs;

@{prefix}-private-content.@{prefix}-root {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .@{prefix}-content {
        position: relative;
        height: 100%;
        &.@{prefix}-blocked {
            border-width: 1px;
            border-style: dashed;
            // ThemeOption: border-color: @text-color-weak;
            border-color: transparent; // ThemeFix
            border-radius: @border-radius-large;
        }
        .@{prefix}-placeholder {
            padding: 1em;
            filter: none !important;
            .@{prefix}-text {
                font-size: 1.25em;
                line-height: 1.5em;
                .@{prefix}-text-wrapper {
                    h1 {
                        margin-bottom: .75em;
                        text-align: left;
                    }
                    h2 {
                        margin-bottom: .5em;
                        text-align: left;
                    }
                    p {
                        margin-bottom: .5em;
                        text-align: left;
                        &:last-of-type {
                            margin-bottom: 0;
                        }
                    }
                }
            }
            .@{prefix}-image, .@{prefix}-video {
                .@{prefix}-media-wrapper {
                    overflow: hidden;
                    width: 100%;
                    padding-bottom: calc(100% / 3 * 2);
                }
            }
            .@{prefix}-album {
                .clearfix;
                margin-bottom: -1em; // Fixes media-wrapper's margin-bottom
                .@{prefix}-media-wrapper {
                    &:nth-child(3n) {
                        margin-right: 0;
                    }
                    overflow: hidden;
                    float: left;
                    width: calc((100% - 2em) / 3);
                    padding-bottom: calc((100% - 2em) / 4.5);
                    margin-right: 1em;
                    margin-bottom: 1em;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .@{prefix}-mixed {
                .@{prefix}-mixed-wrapper {
                    font-size: 1.25em;
                    line-height: 1.5em;
                    h1 {
                        margin-bottom: .75em;
                        text-align: left;
                    }
                    h2 {
                        margin-bottom: .75em;
                        text-align: left;
                    }
                    p {
                        margin-bottom: .5em;
                        text-align: left;
                        &:last-of-type {
                            margin-bottom: 0;
                        }
                    }
                    .@{prefix}-media-wrapper {
                        overflow: hidden;
                        float: left;
                        width: calc((100% - 1em) / 3);
                        padding-bottom: calc((100% - 1em) / 4.5);
                        margin-right: 1em;
                        margin-bottom: .25em;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
        }
        .@{prefix}-media-wrapper {
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .@{prefix}-filter {
            display: none;
        }
    }
}