.ska-color-indicator-button {

	/** Left padding of button with color indicator. */
	--ska-color-indicator-button-left: 4px;
	/** Color indicator width/height. */
	--ska-color-indicator-button-size: 20px;
	/** Space between color indicator and button text. */
	--ska-color-indicator-button-gap: 3px;

	&.is-small {
		--ska-color-indicator-button-left: 1px;
		--ska-color-indicator-button-size: 18px;
		--ska-color-indicator-button-gap: 6px;
	}

	position: relative;
	padding-left: calc(
		var(--ska-color-indicator-button-size)
		+ var(--ska-color-indicator-button-left)
		+ var(--ska-color-indicator-button-gap)
	) !important;

	& > .component-color-indicator {
		position: absolute;
		left: var(--ska-color-indicator-button-left);
	}
}

.ska-record-editor__row {

	.ska-color-indicator-button {
		flex-direction: row-reverse;
		gap: 8px;
		font-size: 12px;
		padding-left: 12px !important;
		border-left: 1px solid var(--ska-record-editor-border-color);

		& > .ska-color-indicator {
			position: initial;
		}
	}

	.ska-components-font-control__button {
		font-size: 12px;
		border-left: 1px solid var(--ska-record-editor-border-color);
	}
}