signal-desktop/stylesheets/components/PlaybackButton.scss

// Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

@use '../mixins';
@use '../variables';
@use 'MessageAudio';

.PlaybackButton {
  @include mixins.button-reset;

  & {
    flex-shrink: 0;
    margin-inline-end: MessageAudio.$audio-attachment-button-margin-big;

    outline: none;
    border-radius: 18px;
  }

  &::before {
    display: block;
    height: 100%;
    content: '';
  }

  @mixin audio-icon($name, $icon, $color) {
    &.PlaybackButton--#{$name}::before {
      @include mixins.color-svg('../images/icons/#{$icon}.svg', $color, false);
    }
  }

  @mixin all-audio-icons($color) {
    @include audio-icon(play, v3/play/play-fill, $color);
    @include audio-icon(pause, v3/pause/pause-fill, $color);
    @include audio-icon(download, v3/arrow/arrow-down, $color);
    @include audio-icon(pending, v2/audio-spinner-arc-22, $color);
  }

  &--variant-message {
    width: MessageAudio.$audio-attachment-button-size;
    height: MessageAudio.$audio-attachment-button-size;
  }

  &--variant-mini {
    &::before {
      -webkit-mask-size: 100% !important;
    }
    width: 14px;
    height: 14px;
  }
  &--variant-draft {
    &::before {
      -webkit-mask-size: 100% !important;
    }
    width: 18px;
    height: 18px;
  }

  &--pending {
    cursor: auto;
  }

  &--pending::before {
    animation: rotate 1000ms linear infinite;
  }

  @include mixins.light-theme {
    &--context-incoming {
      &.PlaybackButton--variant-message {
        background: variables.$color-white;
      }
    }
    @include all-audio-icons(variables.$color-gray-60);
  }

  @include mixins.dark-theme {
    &--context-incoming {
      &.PlaybackButton--variant-message {
        background: variables.$color-gray-60;
      }
    }
    @include all-audio-icons(variables.$color-gray-15);
  }

  &--context-outgoing {
    &.PlaybackButton--variant-message {
      background: variables.$color-white-alpha-20;
    }
    @include all-audio-icons(variables.$color-white);
  }
}