.enb-component-columns-layout {

	.components-button-group {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.enb-layout-picker {
		inline-size: 100%;
		padding: 40px 20px;
		border: 2px dashed transparent;
		border-radius: 3px;
		background-color: var(--enb-color-100);
		color: var(--enb-color-700);
		box-shadow: none;
		transition: border 0.25s linear;

		&:focus {
			box-shadow: none;
		}

		&:not(.active):hover {
			border-color: var(--enb-color-400);
		}

		&.active {
			border: 2px solid var(--enb-color-primary-600);
			border-radius: 3px;
		}

		svg {
			inline-size: 100%;
			block-size: auto;
			min-inline-size: 24px;
			fill: transparent;
		}
	}
}
