/* Base plugin styles - CORE */

div#sad-form-status-message-text:empty {
	display: none;
}

.sad-download-form {
	position: relative;
}

.sad-asset {
	position: relative;

	&:focus-within {
		outline: max(2px, 0.15em) solid rgb(from currentColor r g b / 30%);
		outline-offset: max(2px, 0.15em);
		border-radius: 0.15em;
	}
}

input[type='checkbox'].sad-assets-checkbox {
	position: absolute;
	top: 0;
	right: 0;
	transform: none;
	width: 2em;
	height: 2em;

	&:before {
		width: 0.95em;
		height: 0.95em;
	}

	&:focus-visible {
		outline: none;
		outline-offset: unset;
		border-radius: unset;
	}
}

.sad-email-spam-notice {
	font-size: 0.85em;
}

.sad-asset-thumbnail {
	max-height: 140px;
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center;
	
	@media (max-width: 478px) {
		max-height: 100px;
	}
}

.sad-asset-text-content {
	padding: 2rem;
}

.sad-asset-title {
	margin-bottom: 1.2rem;
}

.sad-button-controls-wrapper {
	position: relative;
}

/* Additional plugin styles */

.sad-download-form {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sad-asset-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
	
	@media (max-width: 478px) {
		grid-template-columns: 1fr;
	}
}

.sad-asset {
	background-color: #f7f7f7;
	border: 1px solid #d1d1d1;
	font-weight: 400;
	text-transform: none;
	cursor: pointer;

	&.active {
		border-color: #000;
	}
}

.sad-email-spam-notice {
	text-align: center;
}

.sad-back-button {
	transform: translateY(-100%);
}

.sad-back-button {
	position: absolute;
	left: 0;
	bottom: 0;
	background: none;
	margin: auto;

	&:hover {
		color: rgb(from currentColor r g b / 30%);
	}
	
	@media (max-width: 478px) {
		position: relative;
		transform: translateY(0);
	}
}

input[type='checkbox'].sad-assets-checkbox:not(:checked) {
	border-color: #d1d1d1;
	background-color: white;
}

.message.success,
.message.error {
	margin-top: 2rem;
}

.sad-button-controls-wrapper {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.form-group.submit-button-wrapper {
    width: 320px;
    max-width: 100%;
	
	@media (min-width: 478px) {
		padding: 0;
	}
}