.components-font-size-picker__header {
	&__hint {
		margin-left: $grid-unit-05;
		color: $gray-700;
	}

	// This button is inheriting padding and min-width.
	// @todo: we should refactor it to not need to unset this.
	.components-button.is-small.has-icon:not(.has-text) {
		min-width: $icon-size;
		padding: 0;
	}
}

.components-font-size-picker__controls {
	max-width: $sidebar-width - ( 2 * $grid-unit-20 );
	align-items: center;
	margin-top: $grid-unit-10;
	margin-bottom: $grid-unit-30;

	.components-unit-control-wrapper {
		.components-input-control__label {
			font-weight: 300;
			padding-bottom: 0 !important;
			margin-bottom: $grid-unit-10 !important;
		}
	}

	.components-custom-select-control__button {
		width: 100%;
	}

	// Apply the same height as the isSmall Reset button.
	.components-font-size-picker__number {
		@include input-control;
		display: inline-block;
		font-weight: 500;
		height: 30px;
		margin-bottom: 0;
		margin-left: 0;
		margin-right: $grid-unit-10;
		margin-top: $grid-unit-10;
		width: 54px;

		// Show the reset button as disabled until a value is entered.
		&[value=""] + .components-button {
			cursor: default;
			opacity: 0.3;
			pointer-events: none;
		}

		&-container {
			display: flex;
			flex-direction: column;
		}
	}

	.components-color-palette__clear {
		height: 30px;
	}
}

.components-font-size-picker__custom-input {
	.components-range-control__slider + .dashicon {
		width: 30px;
		height: 30px;
	}
}

.components-font-size-picker {
	border: 0;
	padding: 0;
	margin: 0;
}