/* #region DetailTemplateViewer */

.detail-template-viewer {
    container-type: inline-size;
    container-name: detail-template;
    flex: 1 1 100%;
    width: 100%;
    overflow-y: auto;
    background-color: var(--detail-template-viewer-bkg-color);
    border: 1px solid var(--detail-template-viewer-border-color);
    color: var(--detail-template-viewer-text-color);
    border-radius: 0.25rem;
    padding: 0.75rem;
}

.detail-template-grid {
    display: grid;
    grid-template-columns: repeat(var(--detail-column-count, 12), minmax(0, 1fr));
    grid-auto-rows: minmax(1.5rem, auto);
    gap: 0.25rem;
    align-content: start;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

.detail-template-positioned {
    grid-column: var(--detail-x) / span var(--detail-col-span);
    grid-row: var(--detail-y) / span var(--detail-row-span);
    min-width: 0;
}

.detail-template-label,
.detail-template-databaselabel {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 1rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.detail-template-label {
    color: var(--text-primary);
    font-weight: 600;
}

.detail-template-databaselabel {
    color: var(--body-text-color);
    overflow-wrap: anywhere;
}

    .detail-template-label > span,
    .detail-template-databaselabel > span {
        min-width: 0;
        max-width: 100%;
    }

    .detail-template-databaselabel > span {
        font-style: italic;
    }

.detail-template-panel {
    container-type: inline-size;
    container-name: detail-template;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.5rem;
    background-color: var(--detail-template-viewer-panel-bkg-color);
    border: 1px solid var(--detail-template-viewer-panel-border-color);
    border-radius: 0.25rem;
    box-shadow: 1px 3px 6px 1px var(--detail-template-viewer-boxshadow-color);
}

.detail-template-panel-iterations {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

    .detail-template-panel-iterations > .detail-template-grid + .detail-template-grid {
        padding-top: 0.5rem;
        border-top: 1px solid var(--detail-template-viewer-divide-border-color);
    }

.detail-template-panel .detail-template-panel {
    padding-block: 0.25rem;
    padding-inline: 0.75rem 0.25rem;
    background-color: var(--detail-template-viewer-nested-panel-bkg-color);
    box-shadow: var(--detail-template-viewer-boxshadow-color) 1px 2px 3px 1px;
    border-radius: 0.25rem;
    border: 1px solid var(--detail-template-viewer-boxshadow-color);
}

@container detail-template (max-width: 52rem) {
    .detail-template-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
        gap: 0.375rem;
    }

    .detail-template-positioned {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .detail-template-panel {
        padding: 0.5rem;
    }
}

@container detail-template (max-width: 30rem) {
    .detail-template-viewer {
        padding: 0.5rem;
    }

    .detail-template-label {
        min-height: auto;
        padding-block: 0.125rem 0;
        font-size: 0.75rem;
    }

    .detail-template-databaselabel {
        min-height: auto;
        padding-block: 0 0.375rem;
    }

    .detail-template-panel {
        padding: 0.5rem;
    }

        .detail-template-panel .detail-template-panel {
            padding-inline-start: 0.5rem;
        }
}

/* #endregion DetailTemplateViewer */