/**
 * @name Title
 * @selector [tuiTitle], [tuiSubtitle]
 *
 * @description
 * Basic layout block for titles and subtitles
 * Often used by other more complex elements
 *
 * @attributes
 * data-size — optional size ('s' | 'm' | 'l')
 *
 * @example
 * <h2 tuiTitle>
 *   Title
 *   <span tuiSubtitle>Subtitle</span>
 * </h2>
 *
 * @see-also
 * Label
 */
*:where([tuiTitle]&) {
    position: relative;
    display: flex;
    min-inline-size: 0;
    flex-direction: column;
    text-align: start;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    border: 0;
    font: var(--tui-typography-ui-m);

    :where([tuiSubtitle]) {
        font: var(--tui-typography-ui-s);
        margin: 0;
        padding: 0;

        &:is(legend) {
            margin-block-end: 0.25rem;
        }
    }

    &:where([data-size='s']) {
        gap: 0.125rem;
        font: var(--tui-typography-body-s);

        [tuiSubtitle] {
            font: var(--tui-typography-body-xs);

            &:is(legend) {
                margin-block-end: 0.125rem;
            }
        }
    }

    &:where([data-size='m']) {
        gap: 0.125rem;
        font: var(--tui-typography-heading-h5);

        [tuiSubtitle] {
            font: var(--tui-typography-body-m);

            &:is(legend) {
                margin-block-end: 0.125rem;
            }
        }
    }

    &:where([data-size='l']) {
        gap: 0.5rem;
        font: var(--tui-typography-heading-h3);

        [tuiSubtitle] {
            font: var(--tui-typography-body-m);

            &:is(legend) {
                margin-block-end: 0.5rem;
            }
        }
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0;
        font: inherit;
    }
}

[tuiButton]:where(*&) [tuiTitle] {
    margin-inline-end: auto;

    [tuiSubtitle] {
        color: var(--tui-text-secondary);
    }
}