.components-coblocks-grid-dropdown {
	padding: 16px !important;

	.components-coblocks-css-grid-selector {
		width: 100%;

		.components-button-group {
			margin-bottom: 0;
		}

		.components-base-control__label {
			display: none;
		}
	}

	.components-toggle-control {
		margin: 16px -16px -16px;
		padding: 18px 16px 14px;
		width: calc(100% + 32px);
	}
}

:-ms-fullscreen .components-coblocks-css-grid-selector,
:root .components-coblocks-css-grid-selector {

	.components-button-group {
		display: flex;
		flex-wrap: wrap;

		.components-button {
			display: table-cell;
			padding: 18px;
			width: 50%;
		}
	}
}

.components-coblocks-css-grid-selector {

	.components-button-group {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(1, 1fr);
		margin-bottom: 2em;

		div {
			background: $white;
			padding: 1px;
		}

		.components-button {
			border-radius: 0 !important;
			height: 100%;
			padding: 20px;
			width: 100%;

			svg {
				display: none;
			}
		}

		.is-selected {
			z-index: 99;
		}

		div:nth-of-type(1) .components-button {
			border-radius: 4px 0 0 4px !important;
		}

		div:nth-of-type(3) .components-button {
			border-radius: 0 4px 4px 0 !important;
		}
	}

	&.is-fullscreen .components-button-group {
		grid-template-rows: repeat(3, 1fr);

		div:nth-of-type(1) .components-button {
			border-radius: 4px 0 0 0 !important;
		}

		div:nth-of-type(3) .components-button {
			border-radius: 0 4px 0 0 !important;
		}

		div:nth-last-of-type(1) .components-button {
			border-radius: 0 0 4px 0 !important;
		}

		div:nth-last-of-type(3) .components-button {
			border-radius: 0 0 0 4px !important;
		}
	}
}
