/* Width limit for preview */
.f7-preview {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* Inline Elements */
.f7-preview .inline-elements {
    --gap: 10px;
    --columns: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

.f7-preview .inline-elements.inline-elements-columns {
    --columns: 3;
}

.f7-preview .inline-element,
.f7-preview .inline-element .inline-elements {
    flex: 0 0 calc(100% / var(--columns) + var(--gap) / var(--columns) - var(--gap));
    padding: 10px;
    border: 1px solid var(--pagemodule-grid-cell-bg);
    border-radius: 2px;
    background-color: var(--pagemodule-grid-cell-bg);
    color: var(--module-color);
    position: relative;
}

.f7-preview .inline-element {
    padding-right: 40px;
}

.f7-preview .inline-element .inline-elements {
    background-color: var(--pagemodule-element-bg);
}

.f7-preview .inline-element-edit-btn {
    background: var(--module-bg);
    border: 1px solid #999;
    color: var(--module-color);
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
    z-index: 1;
    padding: 5px;
    border-radius: 5px;
}

/* Image preview */
.f7-preview .backend-preview-image {
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    width: auto;
    height: auto;
    max-width: 150px;
    max-height: 150px;
}

/* Footer separation for access and styling */
.t3-page-ce-footer .access-row + .styling-information {
    margin-top: 5px;
    border-top: 1px solid var(--module-color);
    padding-top: 5px;
}

/* Disable all click on links in preview, except inline edit buttons */
.f7-preview a {
    cursor: default;
}

.f7-preview a:not(.inline-element-edit-btn) {
    pointer-events: none;
}

/* Adjust alert styling in preview */
.f7-preview .automatic-preview .alert {
    margin-bottom: 0;
    margin-top: var(--typo3-alert-margin-bottom);
}

/* Special styling for shortcut preview */
.f7-preview .automatic-preview [data-table="tt_content"][data-field="records"] > .inline-elements > .inline-element {
    background: var(--pagemodule-element-bg);
}

.f7-preview-shortcut .automatic-preview .inline-element-edit-btn {
    /** Hide edit button in shortcut previews, as they might be misleading **/
    display: none;
}

.f7-preview-shortcut {
    background: var(--token-color-blue-10);
    border: 1px solid var(--token-color-blue-30);
    border-radius: 10px;
    padding: var(--typo3-spacing);
}

/* Margin between fields previews */
.f7-preview .field-preview:not(:last-child) {
    margin-bottom: var(--typo3-spacing);
}

/* Headline top margin fixes/reduction */
.f7-preview h1,
.f7-preview h2,
.f7-preview h3,
.f7-preview h4 {
    margin-top: 5px;
}

/* Remove bottom margin from paragraphs, if they are the last element */
.f7-preview p:last-of-type {
    margin-bottom: 0;
}

/* Fix broken column layout for very long words like in youtube filenames */
.f7-preview .field-preview-content {
    word-break: break-word;
}

/*
 * TO BE CLEARED
 */

.t3-grid-container {
    border: 0;
}

.t3-grid-table {
    border-spacing: 0;
}

.t3-page-ce-header-left > * {
    margin-right: 0.5em;
}

.t3-page-ce-header {
    --pagemodule-element-spacing: calc(var(--typo3-spacing) * 0.3) var(--typo3-spacing);
    border-bottom: 2px solid var(--pagemodule-grid-cell-bg);
    margin-bottom: var(--typo3-spacing);
}

.t3-page-ce-body {
    margin: var(--typo3-spacing);
    padding: 0;
}

.t3-page-ce-footer {
    border-top: 2px solid var(--pagemodule-grid-cell-bg);
    margin-top: var(--typo3-spacing);
}

.t3-page-column {
    border-left: var(--pagemodule-grid-spacing) solid var(--module-bg);
    border-top: var(--pagemodule-grid-spacing) solid var(--module-bg);
}

.t3-page-column:first-child {
    border-left: 0;
}

.t3-page-column-header-icons {
    display: none;
}

.t3-page-column-header {
    border-bottom: 2px solid var(--module-bg);
    padding-bottom: 2px;
}