@include body-class(true) {

	// ELEMENT: Plugin Card
	// This one is commonly used to highlight top and new plugins.
	.dashui-plugin-card {
		display: block;
		margin: 0;
		padding: 0;
		border: 0;

		.dashui-plugin-card-header,
		.dashui-plugin-card-body {
			margin: 0;
			padding: 0;
			border: 0;

			.dashui-plugin-card-title {
				margin: 0;
				padding: 0;
				border: 0;
				color: palette(gray, dark);
				font: bold 18px/22px $font;
				letter-spacing: $font--letter-spacing;
				text-transform: none;
			}

			+ div {
				margin-top: 16px;
			}
		}

		.dashui-plugin-card-header {
			display: flex;
			align-items: center;

			.dashui-plugin-card-title {
				overflow: hidden;
				display: block;
				flex: 1;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.sui-button,
			a.sui-button,
			button.sui-button {

				@include media(max-width, md) {
					display: none;
				}
			}
		}

		.dashui-plugin-card-body {

			p {
				color: palette(gray, light);
				font: 400 13px/22px $font;
				letter-spacing: $font--letter-spacing;

				&:first-child {
					margin: 0;
				}

				&:not(:first-child) {
					margin: 10px 0 0;
				}
			}

			.dashui-plugin-image {
				overflow: hidden;
				position: relative;
				border-radius: $border-radius;

				&:before,
				button {
					opacity: 0;
				}

				&:before {
					content: " ";
					backface-visibility: hidden;
					display: block;
					position: absolute;
					z-index: 1;
					background-color: rgba(51, 51, 51, 0.4);
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					transition: 0.2s ease;
				}

				img {
					width: 100%;
					max-width: 100%;
					height: auto;
					display: block;
					margin: 0;
				}

				.sui-button,
				a.sui-button,
				button.sui-button {
					position: absolute;
					z-index: 2;
					margin: 0;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}

				&:hover,
				&:active {

					&:before,
					button {
						opacity: 1;
					}
				}
			}
		}

		@include media(min-width, lg) {
			max-width: 380px;
		}
	}

	.dashui-plugin-card-label {
		display: block;
		color: $blue;
		letter-spacing: $font--letter-spacing;
		text-transform: uppercase;

		&,
		&:focus,
		&:active {
			outline: none;
			box-shadow: none;
		}

		@include media(max-width, md) {
			font: bold 12px/16px $font;
		}

		@include media(min-width, md) {
			font: bold 9px/16px $font;
		}
	}

	// FIX: Top plugin
	.dashui-top-plugin,
	.dashui-new-plugin {

		&:only-child {

			@include media(min-width, md) {
				margin-top: 40px;
			}
		}

		&:not(:only-child) {

			@include media(max-width, md) {
				margin-top: 14px;
			}

			@include media(min-width, md) {
				margin-top: 24px;
			}
		}
	}
}