.o-sizing-control {
	.components-base-control__label {
		margin-bottom: 4px;
	}

	.o-sizing-control-wrapper {
		display: grid;
		grid-template-columns: 25% 25% 25% 25%;
		padding: 6px 0;

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

		.o-sizing-control-item {
			.o-sizing-control-item-input {
				width: 100%;
				min-height: 30px;
				border-radius: 0;
				text-align: center;
				padding: 0 5px;

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

				.dashicon {
					margin: 2px;
				}
			}

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

			&:first-child {
				.o-sizing-control-item-input {
					border-radius: 5px 0 0 5px;
				}
			}

			&:last-child {
				.o-sizing-control-item-input {
					border-radius: 0 5px 5px 0;
				}
			}

			&.toggle-linking {
				display: flex;

				.o-sizing-control-item-input {
					height: 30px;
					border: 1px solid #8d96a0;
					width: 100%;
					display: flex;
					justify-content: center;

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

				&.is-linked {
					.o-sizing-control-item-input {
						background: #a4afb7;
						color: #fff;

						&:hover {
							&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):not(.is-primary):not(.is-tertiary):not(.is-link) {
								background: #a4afb7;
								color: #fff;
								box-shadow: inset 0 0 0 1px #e2e4e7,inset 0 0 0 2px #a4afb7,0 1px 1px rgba(25,30,35,.2);
							}
						}
					}
				}
			}
		}
	}
}