@import "../../../assets/styles/scss/utilities/functions";
@import "../../../assets/styles/scss/utilities/variables";
@import "../../../assets/styles/scss/utilities/mixins";
@import "../../../assets/styles/scss/utilities/default-variables";

.lists-bullets {
	opacity: 1;
	padding: 0px;

	&__container {
		padding: 0px !important;
		margin-top: 0px;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		column-gap: 40px;
		row-gap: 20px;

		@include media-breakpoint-up(xl) {
			column-gap: 50px;
			row-gap: 30px;
		}

		.wp-block-heading {
			margin: 0px;
		}

		&--alt {
			flex-direction: column;
		}
	}

	.lists-bullets__container--alt {
		.lists-bullets-item {
			position: relative;
			padding-left: 15px;

			@include media-breakpoint-up(md) {
				width: 100%;
			}

			@include media-breakpoint-up(xl) {
				width: 100%;
			}
		}
	}

	&-item {
		opacity: 1;
		position: relative;
		border-radius: 2px;
		overflow: hidden;
		width: 100%;
		border: none;
		align-items: center;
		transition: all 0.2s;
		margin-block-start: 0px !important;
		padding-left: 16px;

		@include media-breakpoint-up(md) {
			width: calc(50% - 20px);
		}

		@include media-breakpoint-up(xl) {
			width: calc(33.3% - 50px);
		}

		&::before {
			content: "";
			position: absolute;
			left: 0px;
			top: 0px;
			width: 6px;
			height: 6px;
			border-radius: 50%;
			margin-top: 0.7em;
			background-color: $ui-foreground-primary-accent-01;
		}

		.wp-block-heading {
			margin-bottom: 10px;
		}
	}
}