.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 {
        container-type: size;
        border-bottom: 1px solid var(--main-border-color);
        transition: border 400ms ease-out;

        &.hide-title {
            border-bottom-color: transparent;
            transition: none;
        }

        @container (max-width: 700px) {
            .note-icon-widget .note-icon {
                font-size: 1.3em;
            }

            .note-title-widget {
                display: flex;
                align-items: center;
                .note-title {
                    font-size: 1em;
                }
            }

            .note-title-widget:focus-within + .note-badges,
            .ext-badge .text {
                display: none;
            }
        }
    }

    .note-title-widget {
        input.note-title {
            --input-focus-background: transparent;
            --input-focus-outline-color: transparent;
            --input-hover-background: transparent;
            --input-hover-color: initial;
            --input-focus-color: initial;
        }
    }
}