.note-title-widget {
    flex-grow: 1000;
    height: 100%;
}

.note-title-widget input.note-title {
    font-size: 110%;
    border: 0;
    margin: 2px 0px;
    min-width: 5em;
    width: 100%;
    padding: 1px 12px;
}

.note-title-widget input.note-title[readonly] {
    background: inherit;
    outline: none;
}

.note-title-widget input.note-title.protected {
    text-shadow: 4px 4px 4px var(--muted-text-color);
}

body.mobile .note-title-widget input.note-title {
    padding: 0;
}

body.desktop .note-title-widget input.note-title {
    font-size: 180%;
}

body.experimental-feature-new-layout {
    .title-row,
    .title-details {
        max-width: var(--max-content-width);
        padding: 0;
        padding-inline-start: 24px;
    }

    .title-row {
        margin-left: 12px;

        .note-icon-widget {
            padding: 0;
            width: 41px;
        }
    }

    .note-split.type-code:not(.mime-text-x-sqlite) .title-row,
    .note-split.type-code:not(.mime-text-x-sqlite) .title-details {
        background-color: var(--main-background-color);
    }

    .title-details {
        margin-top: 0;
        contain: none;
        display: flex;
        gap: 0.25em;
        margin: 0;
        list-style-type: none;

        span.value {
            font-weight: 500;
        }
    }

    .note-split.view-mode-default {
        .title-row {
            padding-top: 2em;
            box-sizing: content-box;
        }

        .title-details {
            padding-bottom: 2em;
        }
    }

    .scrolling-container:has(> :is(.note-detail.full-height, .note-list-widget.full-height)) {
        .title-row,
        .title-details {
            width: 100%;
            max-width: unset;
            padding-inline-start: 15px;
        }

        .title-row {
            margin-top: 0;
        }

        .title-details {
            margin-bottom: 0.2em;
            opacity: 0.65;
            font-size: 0.8em;
        }
    }

    &.prefers-centered-content .title-row,
    &.prefers-centered-content .title-details {
        margin-inline: auto;
    }
}