@import 'vars';

$thumbnail_padding: 8px;
$thumbnail_margin: 12px;
$thumbnail_border: 1px solid rgb(240, 240, 240);
$thumbnail_selected_color: rgb(250, 250, 250);

ul.thumbnails.image_picker_selector {
	overflow: auto;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	cursor: pointer;
	@media (max-width: 1350px) {
		grid-template-columns: repeat(3, 1fr);
		gap: 0px;
	}

	@media (max-width: 1200px) {
		grid-template-columns: repeat(2, 1fr);
		gap: 0px;
	}

	@media (max-width: 1024px) {
		grid-template-columns: 1fr;
		gap: 0px;
	}

	@media (min-width: 961px) and (max-width: 992px) {
		grid-template-columns: 1fr;
	}

	@media (max-width: 849px) {
		grid-template-columns: repeat(2, 1fr);
	}

	@media (max-width: 480px) {
		grid-template-columns: 1fr;
	}

	li.group_title {
		float: none;
	}

	li {
		.thumbnail {
			padding: $thumbnail_padding;
			text-align: center;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;

			img {
				-webkit-user-drag: none;
			}

			p {
				text-align: center;
			}
		}

		.thumbnail.selected {
			img{
				border: 2px solid $primary_color;
				border-radius: 7px;
				width: calc(120px - 4px);
			}
			p {
				font-weight: bold;
			}
		}
	}
}