.ska-tailwind-radio {
	--value-max-w: 576px;

	& > .components-base-control__field {

		& > .ska-button-group__group {

			& > .ska-button-group__group {
				display: inline-flex;
				margin-left: -1px;
				margin-right: 0;

				& > .components-button {
					border-radius: 0;

					&.is-primary:not(:focus) {
						box-shadow: none;
					}
				}

				& + .components-button {
					margin-left: -1px;
				}
			}
		}
	}

	& > .components-base-control__field {

		.ska-button-group__group {

			& > .ska-button-group__button:not(.ska-color-indicator-button) {
				display: inline-block;
				max-width: var(--value-max-w);
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.components-button {

			&.ska-tailwind-radio__input {
				cursor: text;

				[contentEditable] {

					&:focus-visible {
						outline: none;
					}
				}

				&.is-small {
					max-width: var(--value-max-w);
					overflow: hidden;
					text-overflow: ellipsis;

					[contentEditable] {
						position: relative;
						margin: 0 -12px;
						padding: 0 12px;
						border-radius: inherit;
						min-width: 28px;
						max-width: var(--value-max-w);
						overflow: hidden;
						text-overflow: ellipsis;

						&[data-type=bare] {
							padding: 0 9px;
						}

						&[data-indicator],
						&[data-modified] {

							&::after {
								position: absolute;
								content: '';
								width: calc(100% - 24px);
								height: 1px;
								left: 12px;
								right: 12px;
								bottom: 4px;
								border-bottom: 1px dotted;
							}
						}

						&[data-modified] {

							&::after {
								border-color: greenyellow;
							}
						}

						/* Unwanted line breaks can appear when backspacing. */
						& > br {
							display: none;
						}
					}
				}

				&:focus-within {
					outline: 1px dashed var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
				}
			}
		}
	}

	&.ska-button-group--pills {

		& > .components-base-control__field {

			& > .ska-button-group__group {

				& > .components-button {

					&.ska-tailwind-radio__char {
						display: inline-flex;
						align-items: center;
						justify-content: center;
						font-weight: bold;
						min-width: 22px;
					}
				}

				& > .ska-button-group__group {
					margin-left: var(--ska-button-group-pills-spacing);
					margin-right: 0;
					margin-bottom: var(--ska-button-group-pills-spacing);

					& > .components-button {
						height: auto;

						&:first-child {
							border-top-left-radius: 999rem;
							border-bottom-left-radius: 999rem;
						}

						&:last-child {
							border-top-right-radius: 999rem;
							border-bottom-right-radius: 999rem;
						}
					}

					& + .components-button {
						margin-left: var(--ska-button-group-pills-spacing);
					}
				}
			}
		}
	}
}