@import "../icons-selector/selector-placeholder.scss";

$tiles_selector_gap: 5px !default;
$tiles_selector_button_padding: 10px !default;

.vpf-component-tiles-selector,
.vpf-component-tiles-selector-items {
	.vpf-tiles-preview-button {
		@extend %vpf-icons-selector-item;

		position: relative;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		width: 33.33%;
		height: auto;
		aspect-ratio: 1 / 1.25;
		padding: 0;
		overflow: hidden;
		background: #efefef !important;
	}

	.vpf-tiles-preview-button-active {
		@extend %vpf-icons-selector-item-active;
	}

	[data-tiles-preview] {
		flex: 1;
		margin-top: $tiles_selector_button_padding - $tiles_selector_gap;
		margin-right: $tiles_selector_button_padding;
		margin-left: $tiles_selector_button_padding - $tiles_selector_gap;
	}

	.vpf-tiles-preview-item-wrap {
		float: left;
		padding-top: $tiles_selector_gap;
		padding-left: $tiles_selector_gap;
	}

	.vpf-tiles-preview-item {
		position: relative;
		background-color: #cacaca;
		border-radius: 2px;

		&::after {
			display: block;
			content: "";
		}
	}
}

.vpf-component-tiles-selector {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;

	.components-button {
		display: inline-flex;
		height: auto;
		padding: 10px;
		margin-right: auto;
		color: #212121 !important;
		text-align: left;
		white-space: normal;
		background: #f3f3f3;
		border-color: #b3b3b3;
	}

	.vpf-tiles-preview-button {
		flex: 0 0 80px;
		width: 80px;
		margin-left: 10px;
		pointer-events: none;
		background: #fff !important;
		border: 1px solid #b3b3b3;
	}
}

.vpf-component-tiles-selector-items {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 15px;
	width: 510px;
	max-width: 100%;
	margin: 12px 0;

	.vpf-tiles-preview-button {
		float: left;
		width: 100%;
	}
}