.label-stack {
	--item-wide: 10em;
	--item-narrow: 1.25em;
	--item-scale: .7;

	font-weight: normal; // Overrides when unread email context

	&.mw100 {
		--item-wide: 100%;
	}

	&-item,
	&-overflow-count {
		border-radius: 1em;
		line-height: 1;
	}

	&-item {
		max-width: var(--item-wide);
		margin: .125em;
		background-color: var(--color, currentColor);

		&-button,
		&-delete {
			color: white;
		}

		&-button {
			padding: .125em .5em;
			text-align: left;
		}

		&-delete {
			margin-right: .5em;

			&-icon {
				display: block;
			}
		}
	}

	&-overflow-count {
		background-color: rgba(black, .5);
		margin-left: .125em;
		cursor: pointer;

		& > * {
			display: block;
			padding: .125em .375em .125em .25em;
			color: white;
		}
	}

	&:not(.is-stacked) {
		margin: -.125em;

		.label-stack-item {
			&:hover,
			&:focus-within {
				box-shadow: 0 0 em(5) 0 rgba(black, .2); // Same hover style than buttons
			}
		}
	}

	&.is-stacked {
		overflow: hidden;
		align-items: baseline;
		flex-wrap: nowrap;

		.label-stack-item {
			overflow: hidden;
			margin: 0;
			transition: transform .1s .2s easing(easeOutQuart),
			            max-width .2s 0s easing(easeOutQuart);

			&:hover,
			&:focus-within,
			&:first-child {
				transition-delay: 0s, .075s;
			}

			&:not(:first-child) {
				--button-opacity: 0;
				max-width: var(--item-narrow);
				transform: scale(var(--item-scale));
			}

			&-button,
			&-delete-icon {
				transition: opacity .2s .1s easing(easeOutQuart);
			}

			&-button {
				opacity: var(--button-opacity, 1);
			}

			&-delete {
				overflow: hidden;

				&-icon {
					opacity: var(--button-opacity, 1);
				}
			}
		}

		@include respond-to($breakpoint-small, 'max') {
			.label-stack-item-delete {
				display: none;
			}
		}

		@include respond-to($breakpoint-small, 'min') {
			&:hover,
			&:focus-within {
				.label-stack-item {
					// Avoid gitch effect on first-child
					&:first-child:not(:hover):not(:focus-within) {
						--button-opacity: 0;
						max-width: var(--item-narrow);
						transform: scale(var(--item-scale));
						transition-delay: .2s, 0s;
					}

					&:not(:first-child):hover,
					&:not(:first-child):focus-within {
						--button-opacity: 1;
						max-width: var(--item-wide);
						transform: scale(1);
					}
				}
			}
		}
	}
}