@charset "UTF-8";
@use "../../core/jkl";
@use "../icon/base-styles" as icon;

/*
 * NOTE: These markers should stay visually aligned with GreenCheckIcon and
 *       RedCrossIcon in the icon package.
 */

@layer jokul.components {
    .jkl-list {
        --list-text-color: var(--jkl-color-text-default);

        list-style-type: "\2022";
        padding-left: var(--jkl-unit-20);
        margin: 0;

        & > .jkl-list__item {
            & > .jkl-list {
                margin: var(--jkl-unit-10) 0;
            }
        }

        &:has(.jkl-list__item--iconed) {
            padding: 0;
        }

        &--ordered {
            padding-left: revert;

            & > .jkl-list__item {
                padding-left: revert;
                list-style: decimal;
            }

            & & > .jkl-list__item {
                list-style: lower-alpha;
            }
        }

        &__item {
            color: var(--jkl-list-text-color);
            padding-left: var(--jkl-unit-15);

            &::marker {
                color: var(--jkl-list-text-color);
            }

            &--iconed {
                display: flex;
                list-style: none;
                position: relative;
                padding-left: 0;

                &::before {
                    @include icon.base-styles;

                    display: inline-grid;
                    place-items: center;
                    width: 1.1875em;
                    height: 1.1875em;
                    box-sizing: border-box;
                    flex-shrink: 0;
                    margin-right: 0.5em;
                    margin-top: 0.2em; // Vertical offset (using em for font-size scaling) to align icon properly with the first line.
                    font-size: 1em;
                    line-height: 1;
                    border-radius: 999px;
                    color: var(--jkl-color-text-on-alert);
                    --jkl-icon-weight: var(--jkl-icon-weight-bold);
                }
            }

            &--check::before {
                @include jkl.decorative($content: "\e5ca");
                background-color: var(--jkl-color-background-alert-success);
            }

            &--cross::before {
                @include jkl.decorative($content: "\e5cd");
                background-color: var(--jkl-color-background-alert-error);
            }
        }

        @include jkl.forced-colors-mode {
            & .jkl-list__item {
                &--check::before,
                &--cross::before {
                    background-color: Canvas;
                    color: CanvasText;
                    border: 1px solid CanvasText;
                }
            }
        }
    }
}