/* variables specific to current element */

$element-specific-variables: "";

.#{$namespace}list {

    /* Save root element context for easy access if nesting is needed */

    $self: &;


    /* properties of current element  + media queries */
    @include list();

    /* Pseudo Elements */

    &::before {
    }

    &::after {
    }

    /*
    Include elements that are linked to the current element but have to reside at the root level of the stylesheet
    (e.g: keyframes)
    */

	> LI {

		@include list-item();

		> OL,
		> UL {

			margin-top: map-deep-get($token-spacer-stack-min-map, "md");

			@include media-breakpoint-up("lg") {

				margin-top: map-deep-get($token-spacer-stack-min-map, "md");

			}

		}

	}

    @at-root {

		UL#{&} {

			> LI {

				@include list-item-dot();

			}

		}

		OL#{&} {

			counter-reset: my-awesome-counter;

			> LI {

				counter-increment: my-awesome-counter;

				&::before {

					content: counter(my-awesome-counter) ".";
					left: -2.25em;
					width: $circle-dimensions-global;
					text-align: center;
					@include custom-prop-fallback("color", "sys-color-text-primary-muted");

				}

			}

		}

    }


    /* children - write selector in full in comments in order to facilitate search */

    // list__childElement



    /* modifiers */

    // list -checkIcon
    &.-checkIcon {

		@include list-check();

		> LI {

			@include list-item-check();

        }

		&.-checkIconAlt {

			> LI {

				@include list-item-check-alt();

				&#{$self}__disabled {

					@include custom-prop-fallback("color", "sys-color-text-neutral-vivid", true, true);
					@include list-item-check-alt-disabled();

				}

				&#{$self}__unavailable {

					@include list-item-unavailable;

				}

			}

		}

    }

    /* random parent element */
    /*
    *
    *   Syntax : .randomParentElt & {}
    *
    */

    /* Pseudo Classes */

    &:hover {
        @media (hover: hover) {

        }
    }

    &:focus {
    }

    &:active {
    }

    &:focus,
    &:active {
    }

}