/*
 * Citizen
 *
 * SkinStyles for Extension:RelatedArticles
 * Module: ext.relatedArticles.cards
 * Version: REL1_35 0f27333
 *
 * Date: 2021-08-31
*/

@import '../../../resources/variables.less';

.ext-related-articles-card-list {
	h3 {
		a {
			color: var( --color-base--emphasized );
		}

		&:after {
			background-image: linear-gradient( to right, transparent, var( --color-surface-1 ) 50% );
		}
	}

	.ext-related-articles-card {
		border-color: var( --border-color-base );
		background-color: var( --color-surface-1 );
		box-shadow: var( --box-shadow-card );

		&:first-child {
			border-radius: var( --border-radius--medium ) var( --border-radius--medium ) 0 0;
		}

		&:last-child {
			border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );
		}
	}

	.ext-related-articles-card > a {
		&:hover {
			box-shadow: var( --box-shadow-dialog );
		}

		&:active {
			box-shadow: none;
		}
	}

	.ext-related-articles-card-extract {
		color: var( --color-base--subtle );
		font-size: @content-caption-size;
	}

	.ext-related-articles-card-thumb {
		border-radius: var( --border-radius--medium ) 0 0 var( --border-radius--medium );
		background-color: var( --color-surface-2 );
	}
}

// 720px - @width-breakpoint-tablet
@media all and ( min-width: 720px ) {
	.ext-related-articles-card-list {
		border-top: 0;

		.ext-related-articles-card {
			border-color: var( --border-color-base );

			// Individual border-radius when cards side by side (not stacked)
			&,
			&:first-child,
			&:last-child {
				border-radius: var( --border-radius--medium );
			}

			& + .ext-related-articles-card {
				border-color: var( --border-color-base );
			}
		}
	}
}