.wp-block-themeisle-blocks-sizing-control {
	.components-base-control__label {
		margin-bottom: 4px;
	}

	.wp-block-themeisle-blocks-sizing-control-wrapper {
		display: grid;
		grid-template-columns: 25% 25% 25% 25%;
		padding: 6px 0;

		&.linking {
			grid-template-columns: 20% 20% 20% 20% 20%;
		}

		.wp-block-themeisle-blocks-sizing-control-item {
			.wp-block-themeisle-blocks-sizing-control-item-input {
				width: 100%;
				border-radius: 0;
				text-align: center;
				padding: 5px;

				&[disabled] {
					background-color: #e6e9ec;
					cursor: not-allowed;
				}
			}

			.wp-block-themeisle-blocks-sizing-control-item-label {
				display: block;
				text-align: center;
				font-size: 9px;
				text-transform: uppercase;
				padding-top: 2px;
			}

			&:first-child {
				.wp-block-themeisle-blocks-sizing-control-item-input {
					border-radius: 5px 0 0 5px;
				}
			}

			&:last-child {
				.wp-block-themeisle-blocks-sizing-control-item-input {
					border-radius: 0 5px 5px 0;
				}
			}

			&.toggle-linking {
				display: flex;

				.wp-block-themeisle-blocks-sizing-control-item-input {
					height: 28px;
					border: 1px solid #8d96a0;
					width: 100%;
					display: flex;
					justify-content: center;
					margin: 1px;

					svg {
						width: 16px;
					    height: 16px;
					}
				}

				&.is-linked {
					.wp-block-themeisle-blocks-sizing-control-item-input {
						background: #a4afb7;
						color: #fff;

						&:hover {
							box-shadow: inset 0 0 0 1px #e2e4e7,inset 0 0 0 2px #a4afb7,0 1px 1px rgba(25,30,35,.2);
						}
					}
				}
			}
		}
	}
}

.wp-block-themeisle-blocks-sizing-control-overlay {
	margin: 8px;

	.dashicons-plus {
		margin-left: 10px;
		margin-right: 5px;
	}
}

@media ( max-width: 782px )  {
	.wp-block-themeisle-blocks-sizing-control {
		.wp-block-themeisle-blocks-sizing-control-wrapper {
			.wp-block-themeisle-blocks-sizing-control-item {
				&.toggle-linking {
					.wp-block-themeisle-blocks-sizing-control-item-input {
						height: 40px;
					}
				}
			}
		}
	}
}
