.wp-block-olelo-channel-card {
	& button {
		background: var(--channel-color);
	}

	& .channel-card-content {
		@media (min-width: 64rem) {
			width: var(--channel-content-width, 100%);
		}
	}

	&[data-active] {
		& button {
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;

			@media (min-width: 64rem) {
				border-bottom-left-radius: 24px;
				border-bottom-right-radius: 24px;
			}

			&[data-has-media] {
				@media (min-width: 64rem) {
					background: linear-gradient(
						0deg,
						var(--channel-color) 10.36%,
						color-mix(in srgb, var(--channel-color) 0%, transparent) 69.75%
					);
				}
			}

			&::after {
				content: "";
				position: absolute;
				inset-inline: 0;
				top: 100%;
				height: 2rem;
				background-color: var(--channel-color);
				pointer-events: none;

				@media (min-width: 64rem) {
					display: none;
				}
			}
		}
	}

	& :where(h3) {
		writing-mode: sideways-lr;
	}

	& :where(svg) {
		width: 100%;
		height: 100%;
	}
}