.ws-lp-header {
	position: relative;
	padding: 0.8rem 3.2rem;
}

.ws-lp-header__list {
	display: flex;
	gap: 0.4rem;
	background-color: white;
}

.ws-lp-header .ws-lp-header__item {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.8rem 1.6rem;
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--sporsora-quinary-color);
	border-radius: 0.6rem;
	transition:
		color 0.15s ease-in-out,
		background-color 0.15s ease-in-out;

	&:hover {
		color: var(--sporsora-text-color);
		background-color: var(--sporsora-secondary-bg-color);
	}

	&.ws-lp-header__selected {
		font-weight: 700;
		color: var(--sporsora-primary-color);
		background-color: var(--sporsora-primary-bg-color);
	}

	& .ws-lp-header__check-icon {
		display: none;
		position: absolute;
		left: 0.8rem;
	}
}

.ws-lp-header .ws-lp-header__select {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.8rem 1.2rem;
	border-radius: 0.8rem;
	border: 0.1rem solid var(--sporsora-light-border);
	color: var(--sporsora-text-color);
	background-color: white;

	&:hover,
	&:focus {
		background-color: white;
	}

	& i {
		color: var(--sporsora-quinary-color);
	}
}

.ws-lp-header--vertical {
	padding: 2rem;
	background-color: white;
	border: 0.1rem solid var(--sporsora-light-border);
	border-radius: 1.2rem;
}

.ws-lp-header--vertical .ws-lp-header__title {
	font-family: var(--sporsora-font-titles);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--sporsora-text-color);
	margin-bottom: 1rem;
}

.ws-lp-header--vertical .ws-lp-header__list {
	flex-direction: column;
	gap: 0.2rem;
	background-color: transparent;
}

.ws-lp-header--vertical .ws-lp-header__item {
	width: 100%;

	&.ws-lp-header__selected {
		font-weight: 500;
	}
}

@media (max-width: 900px) {
	.ws-lp-header--horizontal .ws-lp-header__list {
		position: absolute;
		display: none;
		top: 90%;
		left: 3.2rem;
		right: 3.2rem;
		z-index: 10;
		padding: 0.4rem;
		border: 0.1rem solid var(--sporsora-light-border);
		border-radius: 0.4rem;
		box-shadow: var(--sporsora-card-shadow);

		&.ws-show {
			display: flex;
			flex-direction: column;
			gap: 0;
		}
	}

	.ws-lp-header--horizontal .ws-lp-header__item {
		width: 100%;
		padding: 0.6rem 0.8rem 0.6rem 3.2rem;
		font-size: 1.4rem;
		font-weight: 500;
		color: var(--sporsora-text-color);
		border-radius: 0.4rem;
		transition: unset;

		&:hover {
			color: white;
			background-color: var(--sporsora-primary-color);
		}

		&.ws-lp-header__selected {
			color: white;
			background-color: var(--sporsora-primary-color);
		}

		& .ws-lp-header__check-icon {
			display: inline-block;
		}
	}
}