/*
 * Some of this file contains a temporary kludge that is not a11y-friendly.
 *
 * It won't be necessary when merging to Core, as Core's markup will be
 * modified to achieve what the kludge does here.
 */
.plugin-card .column-description {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.plugin-card .column-description > p {
	margin-top: 0;
}

.plugin-card .column-description .authors {
	order: 1;
}

.plugin-card .column-description .plugin-dependencies {
	order: 2;
}

.plugin-card .column-description p:empty {
	display: none;
}

/*.plugin-card .plugin-dependency-name:before {
	font: normal 20px/.5 dashicons;
	position: relative;
	top: 4px;
	left: -2px;
}
.plugin-card .plugin-dependencies .plugin-dependency-compatible:before {
	content: "\f147";
	color: #007017;
}
.plugin-card .plugin-dependencies .plugin-dependency-incompatible:before {
	content: "\f158";
	color: #d63638;
}*/

.plugin-card .desc {
	margin-inline: 0;
}

.plugin-card .desc > p {
	margin-left: 148px;
	margin-right: 128px;
}

.plugin-card .plugin-dependencies {
	background-color: #e5f5fa;
	border-left: 3px solid #72aee6;
	margin-bottom: .5em;
	padding: 15px;
}

.plugin-card .plugin-dependencies-explainer-text {
	margin-block: 0;
}

.plugin-card .plugin-dependency {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	margin-top: .5em;
}

.plugin-card .plugin-dependency:nth-child(2),
.plugin-card .plugin-dependency:last-child {
	margin-top: 1em;
}

.plugin-card .plugin-dependency-name {
	margin-right: 1em;
	flex-basis: 50%;
}

.plugin-card .plugin-dependency .notice {
	flex-basis: 100%;
	margin-bottom: .5em;
	margin-inline: 0;
}

.plugin-card .plugin-dependency .button {
	margin-inline: auto 1em;
}