style.proposal.pcss

/* 
 - proposal in #7834
 */
.block {
	color: green;
	box-sizing: border-box;
	height: auto;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	position: relative;
	width: 100%;
	z-index: 1;

	@media (min-width: 48rem) {
		padding-left: 2rem;
		padding-right: 2rem;
	}

	@media (min-width: 80rem) {
		padding-left: 3rem;
		padding-right: 3rem;
	}

	@media (prefers-color-scheme: dark) {
		color: lime;
	}

	&:hover {
		outline: 2px solid currentColor;
	}

	&.block--orange {
		color: orange;

		@media (prefers-color-scheme: dark) {
			color: yellow;
		}
	}

	.block__element {
		align-items: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		right: 2rem;
		text-align: center;
		top: 50%;
		transform: translate(-5px, calc(-50% - 1.625rem));
		z-index: 2;

		@media (min-width: 48rem) {
			right: 3rem;
		}

		@media (min-width: 80rem) {
			right: 4rem;
		}

		.block--orange & {
			text-decoration-color: black;

			@media (prefers-color-scheme: dark) {
				text-decoration-color: white;
			}
		}
	}
}