:root {
    --title-transition: opacity 200ms ease-in;
}

.component.inline-title {
    contain: none;
}

.inline-title {
    max-width: var(--max-content-width);
    padding-inline-start: 24px;

    & > .inline-title-row {
        display: flex;
        align-items: center;
        transition: var(--title-transition);

        &.hidden {
            opacity: 0;
            pointer-events: none;
        }
    }

    &.hidden {
        display: none;
    }

    .note-icon-widget {
        padding: 0;
    }

    .inline-title-row {
        border-bottom: 2px solid gray;
    }
}

.title-row {
    &.note-icon-widget,
    &.note-title-widget {
        transition: var(--title-transition);
    }

    &.hide-title .note-icon-widget,
    &.hide-title .note-title-widget {
        opacity: 0;
        pointer-events: none;
    }
}

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

body.prefers-centered-content .inline-title {
    margin-inline: auto;
}

.title-details {
    display: flex;
    gap: 0.25em;
    margin: 0;
    margin-top: 4px;
    list-style-type: none;
    opacity: .5;
    flex-wrap: wrap;

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

.note-type-switcher {
    padding: .25em 0;
    display: flex;
    align-items: center;
    overflow-x: auto;
    min-width: 0;
    gap: 5px;
    min-height: 40px;
    --badge-radius: 12px;

    >* {
        flex-shrink: 0;
    }

    .ext-badge {
        --color: var(--input-background-color);
        color: var(--main-text-color);
        font-size: 0.9rem;
        flex-shrink: 0;
    }
}

.edited-notes {
    padding: 1.5em 0;

    .collapsible-inner-body {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3em;

        .badge {
            margin: 0;
            a.tn-link {
                color: inherit;
                text-transform: none;
                text-decoration: none;
                display: inline-block;
            }
        }
    }

}