@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";

$block: ".impact-default";

#{$block} {
	opacity: 1;

	&.has-background {
		@include media-breakpoint-down(xl) {
			width: 100vw;
			left: calc(-50vw + 50%);
			position: relative;
		}

		@include media-breakpoint-down(xxl) {
			padding: 0 1rem;
		}
	}

	&__row {
		display: grid;
		grid-template-columns: 1fr;

		@include media-breakpoint-up(xl) {
			grid-template-columns: 440px 1fr;
			column-gap: 145px;
		}

		.spacer {
			@include media-breakpoint-up(xl) {
				grid-column-start: 1;
				grid-column-end: 3;
			}

			&:first-of-type {
				margin-bottom: 30px;
			}
		}
	}

	&-item {
		opacity: 1;
		position: relative;
		overflow: hidden;
		width: 100%;
		border: none;
		display: grid;
		grid-template-columns: 1fr;
		gap: 15px;
		margin-block-start: 0px !important;
		padding-bottom: 15px;

		&:not(:last-of-type) {
			// Convert SASS color to a valid SVG string
			$escaped-circle-color: "%23" +
				str-slice(#{$ui-border-line-divider-dots-divider}, 2);

			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='2'%3E%3Ccircle cx='5' cy='1' r='1' fill='#{$escaped-circle-color}' /%3E%3C/svg%3E");
			background-repeat: repeat-x;
			background-position: bottom;
			background-size: 10px 2px;
		}

		&:not(:first-of-type) {
			padding-top: 25px;
		}

		@include media-breakpoint-up(lg) {
			gap: 32px;
			grid-template-columns: 2fr 3fr;
		}

		&__value {
			display: flex;
			margin: 0px;
			font-weight: 500;
		}

		&__content {
			flex: 1;
		}
	}
}