/*
 * ILM Components -- Audio.
 *
 * Almost nothing, deliberately. The native player is a browser control whose
 * internals differ on every engine and are not reliably styleable; the rules
 * here give it a width and stop there rather than pretending otherwise.
 */

.ilm-component--media-audio {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
}

/*
 * With a download link (1.37.0) the root is a `<div>` holding the player and
 * the link, one under the other: the player keeps the full width it has
 * alone, and the link starts on its own line, so the two never overlap at
 * any width. The spacing, width and visibility an author set apply to the
 * root, and so to the pair.
 */
.ilm-component--media-audio .ilm-audio__player {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
}

/*
 * The download link is the library's Button (1.38.0): its colours, radius,
 * padding, hover and focus ring come from basic-button.css, which the
 * component asks for whenever the link is on. Here only where it sits:
 * under the player with room between them, at least 44px tall for a
 * comfortable touch target, and a long label wraps inside it instead of
 * pushing past the edge.
 */
.ilm-component--media-audio .ilm-audio__download {
	min-block-size: 44px;
	max-inline-size: 100%;
	margin-block-start: 0.75rem;
	overflow-wrap: anywhere;
}