.lspd-media-field {
	border: 1px solid #b9c3cb;
	background: #f7f8f9;
	padding: 14px;
	outline: 0;
}

.lspd-media-field:focus,
.lspd-media-field.is-dragging {
	border-color: #315c79;
	box-shadow: inset 0 0 0 1px #315c79;
}

.lspd-media-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.lspd-media-drop {
	display: grid;
	justify-items: center;
	gap: 5px;
	padding: 18px 10px;
	text-align: center;
}

.lspd-media-drop > .icon {
	color: #315c79;
	font-size: 26px;
}

.lspd-media-drop > span {
	color: #5b6770;
}

.lspd-media-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.lspd-media-status {
	min-height: 20px;
	color: #4d5962;
}

.lspd-media-status.is-error {
	color: #9b1c1c;
}

.lspd-media-previews {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 10px;
}

.lspd-media-preview {
	position: relative;
	min-width: 0;
	border: 1px solid #c7cfd5;
	background: #fff;
}

.lspd-media-preview img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.lspd-media-preview footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	padding: 7px;
}

.lspd-media-preview span {
	overflow: hidden;
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lspd-media-preview button {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: #315c79;
	cursor: pointer;
	padding: 4px;
}

html[data-theme="dark"] .lspd-media-field,
body.lspd-dark-mode .lspd-media-field {
	border-color: #485761;
	background: #20272c;
}

html[data-theme="dark"] .lspd-media-preview,
body.lspd-dark-mode .lspd-media-preview {
	border-color: #485761;
	background: #171d21;
}

html[data-theme="dark"] .lspd-media-drop > span,
html[data-theme="dark"] .lspd-media-status,
body.lspd-dark-mode .lspd-media-drop > span,
body.lspd-dark-mode .lspd-media-status {
	color: #d4dbe0;
}

@media (max-width: 600px) {
	.lspd-media-previews {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}