.ska-blocks__tailwind-inspector-controls {
	overflow-x: hidden;

	&:has(+ .components-tools-panel),
	&:last-child {
		margin-bottom: 1px;
	}

	& + .components-panel__body {
		margin-top: 0;
	}

	&__feature-group {
		position: relative;
		padding-top: 12px !important;
		row-gap: 12px !important;

		& > .components-tools-panel-header {

			& > h2 {
				display: flex;
				align-items: center;
				width: 100%;

				/** Copy Tailwind classes button. */
				& > .components-button {
					margin-left: auto;
					opacity: 0.5;

					&:hover {
						opacity: 1;
					}

					& > svg {
						transform: scale(0.65);
					}
				}

				&::before {
					display: inline-block;
					content: '';
					width: 24px;
					height: 24px;
					margin-right: 8px;
					/* ska icon */
					background-image: url("data:image/svg+xml,%3Csvg fill='%232fa4e7' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32.598 18.796' width='24' height='24' data-ska-icon='true' aria-hidden='true' focusable='false'%3E%3Cg aria-label='ska'%3E%3Cpath d='M5.258 18.796q-1.677 0-3.023-.584T0 16.485l1.778-1.524q.762.889 1.651 1.295.914.381 2.057.381.458 0 .839-.102.406-.127.685-.355.305-.229.458-.534.152-.33.152-.71 0-.661-.483-1.068-.254-.177-.812-.38-.534-.23-1.397-.458-1.474-.38-2.413-.863-.94-.483-1.448-1.093-.381-.482-.559-1.041Q.33 9.449.33 8.763q0-.838.356-1.524.38-.711 1.016-1.22.66-.533 1.524-.812.889-.28 1.88-.28.94 0 1.854.255.94.254 1.727.736.787.483 1.32 1.143L8.51 8.712q-.483-.482-1.067-.838-.559-.381-1.143-.584-.584-.203-1.067-.203-.533 0-.965.101-.432.102-.736.305-.28.203-.432.508-.153.305-.153.686.026.33.153.635.152.28.406.482.28.204.838.432.56.229 1.423.432 1.27.33 2.083.737.838.38 1.32.889.508.482.712 1.117.203.635.203 1.423 0 1.143-.66 2.057-.636.889-1.728 1.397t-2.438.508zM12.652 14.63l-.127-2.844L18.9 5.46h3.53zm-2.388 4.166V0h2.616v18.796zm8.992 0-5.03-5.867 1.855-1.702 6.528 7.569zM25.308 18.796c-1.1 0-2.108-.305-3.023-.914-.897-.61-1.617-1.44-2.159-2.49-.541-1.05-.812-2.235-.812-3.556 0-1.337.27-2.523.812-3.556.56-1.05 1.304-1.87 2.236-2.463.948-.593 2.006-.89 3.175-.89.694 0 1.329.102 1.905.305a4.516 4.516 0 0 1 1.498.864c.44.356.796.77 1.067 1.245.288.474.466.982.533 1.524l-.584-.204V5.207h2.642v13.589h-2.642v-3.429l.61-.178a3.613 3.613 0 0 1-.635 1.346 4.823 4.823 0 0 1-1.194 1.143 6.185 6.185 0 0 1-1.6.813 5.454 5.454 0 0 1-1.829.305zm.686-2.413c.796 0 1.498-.195 2.108-.584a3.954 3.954 0 0 0 1.422-1.6c.356-.695.534-1.482.534-2.363 0-.863-.178-1.634-.534-2.311a3.954 3.954 0 0 0-1.422-1.6c-.61-.39-1.312-.584-2.108-.584-.78 0-1.473.194-2.083.584a4.215 4.215 0 0 0-1.422 1.6c-.34.677-.508 1.448-.508 2.311 0 .88.169 1.668.508 2.363.355.677.83 1.21 1.422 1.6.61.39 1.304.584 2.083.584z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
				}
			}
		}

		&__panel {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 0;
			grid-column: 1 / -1;

			&__item {
				padding: 0;
				border-left: 1px solid rgba(0, 0, 0, 0.1);
				border-right: 1px solid rgba(0, 0, 0, 0.1);
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);

				&:first-child {
					margin-top: 0;
					border-top-left-radius: 2px;
					border-top-right-radius: 2px;
					border-top: 1px solid rgba(0, 0, 0, 0.1);
				}

				&:last-child {
					border-bottom-left-radius: 2px;
					border-bottom-right-radius: 2px;
				}

				> div,
				> div > button {
					border-radius: inherit;
				}
			}
		}

		&__copy-button {
			position: absolute;
			top: 12px; // Matches root padding-top.
			right: 48px;

			& > svg {
				opacity: 0.5;
				transform: scale(0.65);
			}
		}
	}

	&__feature {

		&__header {
			gap: 0 !important;
			margin-bottom: 8px;

			& > h3 {
				font-size: 18px;
				margin: 0 auto 0 0;
			}

			& > .components-button {
				opacity: 0.5;

				&:hover, &:focus, &:active {
					opacity: 1;
					box-shadow: none;
				}

				&.is-destructive {

					&:hover {
						box-shadow: none;
					}
				}

				& > svg {
					width: 18px;
					height: 18px;
				}
			}
		}
	}
}