.audio-clip-player {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    vertical-align: baseline;
    white-space: nowrap;
}

.audio-clip-control,
.audio-clip-label {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.audio-clip-control {
    flex: 0 0 auto;
    width: 1em;
}

.audio-clip-control:focus-visible,
.audio-clip-label:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.audio-clip-control:disabled,
.audio-clip-label:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.audio-clip-label {
    color: blue;
    text-align: left;
}

.audio-clip-label:hover {
    text-decoration: underline;
}

.audio-clip-icon {
    display: inline-block;
    position: relative;
    width: 1em;
    height: 1em;
}

.audio-clip-icon-play::before {
    content: "";
    position: absolute;
    top: 0.12em;
    left: 0.22em;
    width: 0;
    height: 0;
    border-top: 0.38em solid transparent;
    border-bottom: 0.38em solid transparent;
    border-left: 0.58em solid currentColor;
}

.audio-clip-icon-pause::before,
.audio-clip-icon-pause::after {
    content: "";
    position: absolute;
    top: 0.12em;
    width: 0.25em;
    height: 0.76em;
    background: currentColor;
}

.audio-clip-icon-pause::before {
    left: 0.2em;
}

.audio-clip-icon-pause::after {
    right: 0.2em;
}