.wp-block-media-manager-media-player {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	padding: 0.5em;
	border-radius: 50vh;

	// Time position block.
	.wp-block-media-manager-time-position-display {
		margin-top: 0;
		margin-right: 0.5em;
		margin-bottom: 0;
		margin-left: 0.2em;
	}
}

// All children items (play, pause, time-position, etc...)
.wp-media-manager-player-button {
	margin: 0 5px 0 0;
	// display: inline-block;
	// align-self: center;
	border-radius: 9999px; // 100% causes an oval, but any explicit but really high value retains the pill shape.
	line-height: 0;

	button {
		padding: 0;
		border: 0;

		&:focus {
			outline: none;
		}

		svg {
			fill: currentColor;
		}

		&:not(:hover):not(:active):not(.has-text-color) {
			background-color: transparent;
			border-color: currentColor;
			color: inherit;
		}
	}
}

.is-small-size {
	max-height: 24px;
	button {
		width: 24px;
		min-width: 24px;
		height: 24px;
		max-height: 24px;
	}
}

.is-normal-size {
	max-height: 36px;
	button {
		width: 36px;
		min-width: 36px;
		height: 36px;
		max-height: 36px;
	}
}

.is-medium-size {
	max-height: 48px;
	button {
		width: 48px;
		min-width: 48px;
		height: 48px;
		max-height: 48px;
	}
}

.is-large-size {
	max-height: 60px;
	button {
		width: 60px;
		min-width: 60px;
		height: 60px;
		max-height: 60px;
	}
}

.is-giant-size {
	max-height: 102px;
	button {
		width: 102px;
		min-width: 102px;
		height: 102px;
		max-height: 102px;
	}
}