@import '@resources/index.css';

.supt-list-item {
	@extend %t-sm-normal;
	position: relative;
	margin-bottom: 16px;

	padding-left: 33px;
	@media (min-width: $sm-breakpoint) {
		padding-left: 40px;
	}

	&::before {
		@extend %t-s-normal-medium;
		position: absolute;
		top: 0.1em;
		left: 0;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--list-color, $color-pink);

		@media (min-width: $sm-breakpoint) {
			width: 24px;
			height: 24px;
		}
	}

	.supt-list-item {
		margin-bottom: 6px;
		padding-left: 26px;
		@media (min-width: $sm-breakpoint) {
			padding-left: 30px;
		}

		&::before {
			background: none;
			@media (min-width: $sm-breakpoint) {
				top: 0.1em;
			}
		}
	}

	ol .supt-list-item::before {
		@extend %t-sm-normal-medium;
	}
}