ul,
ol {
    padding-inline-start: 40px;
    &.plain,
    &.none {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    li {
        vertical-align: text-top !important;
    }
}

nav {
    ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }
}

ol {
    li::marker {
        @include writing-mode-vertical-rl {
            text-combine-upright: all;
        }
        @include writing-mode-horizontal-tb {
            text-combine-upright: none;
        }
    }
    li {
        @include writing-mode-vertical-rl {
            padding-inline-start: 6px;
        }
        @include writing-mode-horizontal-tb {
            padding-inline-start: 0px;
        }
    }
}

/*
This SCSS generates CSS classes for custom list styling, it:
- For classes like .list-style-disc, .list-style-decimal-period etc.
- Uses counter-reset for automatic item numbering
- Supports base styles (disc, decimal etc.) and suffix variants (-period ".", -parenthesis ")")
- Easy addition of new styles using $list_styles array and new suffixes and $suffixes map
*/

//https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
$list_styles: disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin,
    upper-latin, armenian, georgian, lower-alpha, upper-alpha;

$suffixes: (
    'parenthesis': ')',
    'period': '.'
);

[class^='list-style-'],
[class*=' list-style-'] {
    counter-reset: custom-counter;

    & > p,
    & > div,
    & > li.qti-choice {
        position: relative;
        &::before {
            counter-increment: custom-counter;
            position: absolute;
            left: -25px;
            width: 20px;
            display: inline-block;
            text-align: center;
        }
    }

    @each $style in $list_styles {
        &.list-style-#{$style} {
            & > p,
            & > div,
            & > li.qti-choice::before {
                content: counter(custom-counter, #{$style});
            }
        }
    }

    @each $style in $list_styles {
        @each $suffix, $symbol in $suffixes {
            &.list-style-#{$style}-#{$suffix} > li.qti-choice::before {
                content: counter(custom-counter, #{$style}) '#{$symbol}';
            }
        }
    }
}