.tui-list {
    font: var(--tui-typography-body-m);
    line-height: 1.5rem;
    list-style-type: none;
    color: var(--tui-text-primary);

    &_large {
        font: var(--tui-typography-body-l);
        line-height: 1.75rem;
    }

    &_small,
    &_extra-small {
        font: var(--tui-typography-body-s);
        line-height: 1.25rem;
    }

    &_nested {
        margin: 0.75rem 0 0.75rem 1.25rem;
        color: var(--tui-text-secondary);

        .tui-list_large & {
            margin-inline-start: 0.75rem;
        }

        .tui-list_small & {
            margin-block-start: 0.5rem;
            margin-block-end: 0.5rem;
        }
    }

    &_ordered {
        counter-reset: counter;
    }

    &__item {
        position: relative;
        padding-inline-start: 1.5rem;
        overflow-wrap: break-word;
        margin-block-start: 0.75rem;

        &:first-child {
            margin-block-start: 0;
        }

        &::before {
            content: '';
            position: absolute;
            inset-inline-start: 0;
            inset-block-start: 0.5rem;
            inline-size: 0.5rem;
            block-size: 0.5rem;
            border-radius: 100%;
            background-color: var(--tui-background-accent-1);

            .tui-list_large > & {
                inset-block-start: 0.625rem;
            }

            .tui-list_small > & {
                inset-block-start: 0.375rem;
            }
        }

        .tui-list_extra-small > & {
            margin-block-start: 0.5rem;
        }

        .tui-list_linear & {
            padding-inline-start: 1.75rem;

            &::before {
                content: '\2014';
                inset-inline-start: 0;
                inset-block-start: auto;
                inline-size: auto;
                block-size: auto;
                background-color: transparent;
            }
        }

        .tui-list_ordered & {
            padding-inline-start: 1.25rem;

            &::before {
                content: counter(counter) '.';
                inset-inline-start: 0;
                inset-block-start: auto;
                counter-increment: counter;
                inline-size: auto;
                block-size: auto;
                color: var(--tui-text-tertiary);
                background-color: transparent;
            }
        }

        .tui-list_triangle > & {
            padding-inline-start: 1.75rem;

            &::before {
                content: '\25E4'; // represent symbol '◤'
                inset-inline-start: 0;
                inset-block-start: 1px;
                inline-size: auto;
                block-size: auto;
                background-color: transparent;
                color: var(--tui-text-tertiary);
                font-size: 0.75rem;
            }
        }
    }

    &__item-title {
        font: var(--tui-typography-heading-h5);
        margin: 0;

        .tui-list_small & {
            line-height: 1.25rem;
            font-weight: bold;
        }
    }

    &__description {
        margin: 0.5rem 0 0;
        color: var(--tui-text-secondary);

        .tui-list_small & {
            margin-block-start: 0.25rem;
        }

        .tui-list_large & {
            line-height: 1.75rem;
            margin-block-start: 0.75rem;
        }
    }
}