/* =============================================
   03_WIDGETS / w-document-item
   Элемент документа (иконка + название).
   ============================================= */

.document-item {
	display: flex;
	border-radius: 10px;
	background-color: var(--whiteColor);
	gap: 10px;
	align-items: center;
	outline: 2px solid transparent;
	transition: box-shadow 0.3s, outline-color 0.3s;
}
.document-item img {
	align-self: flex-start;
	width: 38px;
	height: 42px;
	flex: 0 0 32px;
	object-fit: contain;
}
.document-item span {
	font-size: 16px;
	line-height: 125%;
}
.document-item._disabled {
	pointer-events: none;
	color: var(--greenColor5);
}
.document-item:active {
	outline-color: rgba(7, 158, 108, 0.2);
}

/* ── Responsive ── */

@media (max-width: 63.99875em) {
	.document-item {
		padding: 14px 14px 14px 8px;
	}
}
@media (min-width: 63.99875em) {
	.document-item {
		padding: 20px 20px 20px 14px;
	}
}

/* ── Hover ── */

@media (any-hover: hover), (pointer: fine) {
	html:not([data-fls-touch]) .document-item:hover {
		box-shadow: 0px 4px 23px 0px rgba(0, 0, 0, 0.1019607843);
	}
	html:not([data-fls-touch]) .document-item:active:hover {
		box-shadow: none;
	}
}