@font-face {
    font-family: icons;
    src: url(../fonts/MaterialIconsSharp-Regular.otf);
}

.waveform-player {
    display: flex;
    align-items: stretch;
    height: 150px;
    align-items: center;
    margin-bottom: var(--spacing-s);
}

.waveform-player>div {
    width: 100%;
    height: 100%;
}

.waveform-playpause {
    background: var(--blue);
    border: none;
    outline: none;
    width: var(--play-size);
    height: var(--play-size);
    aspect-ratio: 1 / 1;
    appearance: none;
    border-radius: 100%;
    color: transparent;
    position: relative;
    font-size: var(--play-size);
    translate: 1px 0; z-index: 9;
}

.waveform-playpause:before {
    font-size: 70%;
    font-family: "icons";
    content: "\e037";
    position: absolute;
    color: var(--white);
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}

.waveform-playpause.playing:before {
    content: "\e034"
}

.waveform-placeholder {
    padding-left: var(--play-size);
    margin-bottom: var(--spacing-m);
}