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

.vpf-control-wrap-icons_selector:has(+ .vpf-control-wrap-category_tabs),
.vpf-control-wrap-icons_selector:has(+ .vpf-control-wrap-category_collapse) {
	margin-bottom: 0;
}

.vpf-control-wrap-icons_selector:has(+ .vpf-control-wrap-category_navigator) {
	margin-bottom: 16px;
}

.vpf-component-icon-selector {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 5px;
	width: 100%;

	.vpf-component-icon-selector-item {
		@extend %vpf-icons-selector-item;

		display: flex;
		flex-direction: column;
		align-items: center;
		min-width: 0;
		cursor: pointer;
		transition: 0.2s border, 0.2s background-color, 0.2s box-shadow;

		svg {
			width: 100%;
			max-width: 18px;
			height: auto;
			color: inherit;
			fill: none;
		}

		&.vpf-component-icon-selector-item-active {
			@extend %vpf-icons-selector-item-active;
		}

		span {
			margin-right: -8px;
			margin-left: -8px;
			font-size: 12px;
			word-break: break-word;
		}

		div + span {
			padding-top: 8px;
		}
	}

	.vpf-component-icon-selector-item-collapse {
		svg {
			width: 14px;
			height: 14px;
			color: var(--wp-admin-theme-color);
		}

		.vpf-component-icon-selector-item-collapse {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 23px;
			height: 23px;

			&::after {
				position: absolute;
				top: -3px;
				right: -3px;
				bottom: -3px;
				left: -3px;
				display: block;
				content: "";
				background-color: var(--wp-admin-theme-color);
				border-radius: 15px;
				opacity: 0.05;
				transition: 0.1s opacity ease-in-out;
			}
		}

		&:hover,
		&:focus {
			&::after {
				opacity: 0;
			}

			.vpf-component-icon-selector-item-collapse::after {
				opacity: 0.1;
			}
		}

		&.vpf-component-icon-selector-item-expanded {
			svg {
				transform: rotate(180deg);
			}
		}
	}
}