@use 'sass:color';

@use '../../../node_modules/sass-basis/src/css/core';
@use '../../css/core/variable/variable' as *;

:root :where(.wp-block-list.is-style-sme-list-arrow) {
	list-style: none;
	padding-left: 1.5em;

	:where(li) {
		position: relative;

		&::before {
			content: '';
			position: absolute;
			left: calc(-1.5em + 7px);
			top: calc(var(--_half-leading) * 1rem + 4px);
			display: block;
			width: 6px;
			height: 6px;
			border-color: core.darker(color.adjust($alert-color, $hue: -30deg));
			border-style: solid;
			border-width: 0 2px 2px 0;
			transform: rotate(-45deg);
		}

		&::after {
			content: '';
			position: absolute;
			width: 8px;
			height: 0;
			border-color: core.darker(color.adjust($alert-color, $hue: -30deg));
			border-style: solid;
			border-width: 2px 0 0 0;
			left: calc(-1.5em + 5px);
			top: calc(var(--_half-leading) * 1rem + 6px);
		}
	}
}