div.note-title-widget {
    /* The font size for the title */
    --note-title-size: 180%;
    /* The horizontal padding of the title widget */
    --note-title-padding-inline: 12px;

    flex-grow: 1000;
    height: auto;
    contain: unset;
}

.note-title-widget input.note-title {
    font-size: var(--note-title-size);
    border: 0;
    border-radius: 0;
    min-width: 5em;
    width: 100%;
    line-height: 1;
    padding-block: 0;
    padding-inline: var(--note-title-padding-inline);

    &::selection {
        color: var(--main-text-color);
    }
}

.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 {
    --note-title-padding-inline: 0;
}

body.experimental-feature-new-layout {
    .title-row {
        container-type: size;
        transition: border 400ms ease-out;

        &.note-split-title {
            border-bottom: 1px solid var(--main-border-color);

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

            .note-icon-widget {
                margin-inline: 12px 8px;
            }
        }

        .note-icon-widget {
            --note-icon-size: 16px;
            --note-icon-container-padding-size: 6px;
            margin-inline: 0;
        }

        .note-title-widget {
            --note-title-size: 18px;
            --note-title-padding-inline: 0;
        }

        @container (max-width: 600px) {
            .note-title-widget {
                --note-title-size: 1.25rem;
                --note-title-padding-inline: 4px;
            }

            .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;
            }

            .ext-badge {
                --size: 2em;
                width: var(--size);
                height: var(--size);
                padding: 0;

                .bx {
                    opacity: 1;
                    margin: 0;
                }
            };
        }
    }

    .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;
        }
    }
}