element-web/res/css/views/audio_messages/_PlayPauseButton.pcss

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/

.mx_PlayPauseButton {
    position: relative;
    width: 32px;
    height: 32px;
    min-width: 32px; /* for when the button is used in a flexbox */
    min-height: 32px; /* for when the button is used in a flexbox */
    border-radius: 32px;
    background-color: $system;

    &::before {
        content: "";
        position: absolute; /* sizing varies by icon */
        background-color: $secondary-content;
        mask-repeat: no-repeat;
        mask-size: contain;
    }

    &.mx_PlayPauseButton_disabled::before {
        opacity: 0.5;
    }

    &.mx_PlayPauseButton_play::before {
        width: 13px;
        height: 16px;
        top: 8px; /* center */
        left: 12px; /* center */
        mask-image: url("$(res)/img/element-icons/play.svg");
    }

    &.mx_PlayPauseButton_pause::before {
        width: 10px;
        height: 12px;
        top: 10px; /* center */
        left: 11px; /* center */
        mask-image: url("$(res)/img/element-icons/pause.svg");
    }
}