.ska-blocks__toggle-button {
	width: 100%;
	height: auto;
	min-height: 47px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 4px;
	padding: 8px 12px;

	/** For `useClickAway` detection to work better in <Dropdown>. */
	& > &__label,
	& > &__detail {
		pointer-events: none;
	}

	&__label {
		font-size: 13px;
		line-height: 1;
	}

	/** Makes `justify-content: center` work properly with the empty (but not hidden) element. */
	&:has(> .ska-blocks__toggle-button__detail:empty)::before {
		content: '';
		display: block;
	}

	&__detail {
		margin: 0;
		padding: 0;
		background: transparent;
		max-width: 100%;
		text-align: left;

		display: flex;
		flex-wrap: wrap;
		gap: 2px;

		transform: scale(1);
		transition-duration: 0.15s;
		transition-timing-function: ease;
		transition-property: transform;

		&:empty {
			transform: scale(0);
		}

		& > &__item {
			white-space: nowrap;
			padding: 2px 4px;
			border-radius: 2px;
			color: rgba(0, 0, 0, 0.9);
			text-shadow: 0 0 rgba(0, 0, 0, 0.7);
			background: rgba(0, 0, 0, 0.05);
			font-size: 10px;
			line-height: 1;
			max-width: 100%;
			text-overflow: ellipsis;
			overflow: hidden;

			&--secondary {
				opacity: 0.75;
			}
		}

	}

	&--is-open {
		background: #f9f9f9;
		color: var(--wp-admin-theme-color);
		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
	}
}