@forward "../shared/workleaves";

body {
    --properties-columns: 2;
}

@container metadata (width > 600px) {
    .metadata-content:not(body.is-grabbing .metadata-content:hover) {
        display: block;
        column-count: var(--properties-columns);
        column-rule: 1px dashed var(--metadata-border-color);
    }
}

[data-type="markdown"] {
    --metadata-border-width: 1px;
    --metadata-padding: var(--size-4-6) var(--size-4-2) var(--size-4-2) var(--size-4-2);

    .metadata-container {
        outline: 1px solid color-mix(in srgb, var(--metadata-border-color), transparent 50%);
        outline-offset: -5px;
    }

    .metadata-properties-heading .collapse-indicator {
        inset-inline-start: 0;
    }

    .metadata-properties-heading {
        --heading-padding-inline: var(--size-4-6);
        position: absolute;
        top: 0;
        transform: translateY(calc(-50% + 0.05em));
        background: linear-gradient(
            to right,
            transparent,
            var(--workleaves-background) var(--heading-padding-inline),
            var(--workleaves-background) calc(100% - var(--heading-padding-inline)),
            transparent 100%
        );
        background-size: 100% 5px;
        background-repeat: no-repeat;
        background-position: center calc(50%);
        padding-inline: var(--heading-padding-inline);
        z-index: 10;
    }
}

.workspace > .workspace-split:not(.mod-root) [data-type="markdown"] .metadata-container {
    --metadata-padding: 0.5em 0 0 0;
    outline: none;
}

.workspace > .workspace-split:not(.mod-root) [data-type="markdown"] .metadata-properties-heading {
    transform: translateY(-50%);
}
