:root {
	--ska-button-group-label-spacing: 4px;
	--ska-button-group-help-spacing: 4px;
	--ska-button-group-pills-spacing: 4px;
	--ska-button-group-consecutive-spacing: 8px;
}

.ska-button-group {

	/** `__nextHasNoMarginBottom` doesn't seem to cut it. */
	&:last-child:not(#_) {
		margin-bottom: 0;
	}

	& > .components-base-control__field {

		& > .components-base-control__label {
			cursor: initial;
			display: block;
			margin-bottom: var(--ska-button-group-label-spacing);
		}

		& > .ska-button-group__group {
			// max-width: 100%; // Causes arbitrary value button to wrap
			max-width: max-content;

			& > .components-button {
				max-width: 100%;
				overflow-x: hidden;
				text-overflow: ellipsis;

				&:not(.ska-tailwind-radio__input):not(.ska-color-indicator-button) {
					display: inline-block;
				}

				&.is-primary:not(:focus) {
					box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
				}

				&:only-child {
					border-radius: 2px;
				}
			}
		}
	}

	& > .components-base-control__help {
		margin-top: var(--ska-button-group-help-spacing);
	}

	&.ska-button-group--fluid {

		& > .components-base-control__field {

			& > .ska-button-group__group {
				display: flex;
				flex-direction: row;
				max-width: none;

				& > .components-button {
					flex-grow: 1;
					justify-content: center;
				}
			}
		}
	}

	&.ska-button-group--pills {

		& > .components-base-control__field {

			& > .ska-button-group__group {
				margin-left: calc(-1 * var(--ska-button-group-pills-spacing));
				margin-bottom: calc(-1 * var(--ska-button-group-pills-spacing));

				& > .components-button {
					height: auto;
					border-radius: 999rem;
					margin-left: var(--ska-button-group-pills-spacing);
					margin-bottom: var(--ska-button-group-pills-spacing);
				}
			}
		}

		.ska-color-indicator-button {

			.ska-color-indicator {
				border-radius: 999rem;
			}
		}
	}

	& + & {
		margin-top: var(--ska-button-group-consecutive-spacing);
	}

	/** Fix `x` button having black shadow. */
	.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link) {
		box-shadow: inset 0 0 0 1px var(--wp-components-color-accent);

		&:hover {
			background: #cc181808;
		}
	}

	&--hide-label {

		& > .components-base-control__field {

			& > .components-base-control__label {
				clip: rect(0, 0, 0, 0);
				white-space: nowrap;
				border-width: 0;
				width: 1px;
				height: 1px;
				margin: -1px;
				padding: 0;
				position: absolute;
				overflow: hidden;
			}
		}
	}
}

.components-v-stack {

	& > .ska-button-group + .ska-button-group {
		--ska-button-group-consecutive-spacing: 0;
	}
}