// =============================================================================
// :: Settings
// =============================================================================
$arrow-size: 2.5rem;

// =============================================================================
// :: Usp-list
// =============================================================================
.c-usp-list {
	position: relative;

	height: auto;
}

// =============================================================================
// :: Elements
// =============================================================================
.c-usp-list__container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.c-usp-list__button {
	margin-top: 4rem;
}

// =============================================================================
// :: Modifiers
// =============================================================================
.c-usp-list--interactive {
	position: relative;

	&::before {
		content: "";

		position: absolute;
		left: 50%;
		bottom: -$arrow-size;

		border-top: $arrow-size solid $border-color-base;
		border-left: $arrow-size solid transparent;
		border-right: $arrow-size solid transparent;

		transform: translateX(-50%);
	}

	.c-usp-list__button {

		article {
			opacity: 0.45;

			transition: opacity 0.2s ease-in-out;
		}
	}
}

// =============================================================================
// :: States
// =============================================================================
.c-usp-list__button {

	&.is-active {

		article {
			opacity: 1;
		}
	}
}