signal-desktop/stylesheets/components/Waveform.scss

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

.Waveform {
  /**
   * Progress indicators for audio or video content should always be left-to-right.
   * This overrides the default direction of the page.
   */
  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
  direction: ltr;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  cursor: pointer;

  outline: 0;

  &__bar {
    display: inline-block;

    width: 2px;
    border-radius: 2px;
    transition: height 250ms, background 250ms;

    &:not(:first-of-type) {
      margin-inline-start: 2px;
    }

    @include light-theme {
      background: $color-black-alpha-40;

      &--active {
        background: $color-black-alpha-80;
      }
    }

    @include dark-theme {
      background: $color-white-alpha-40;

      &--active {
        background: $color-white-alpha-80;
      }
    }

    .module-message__audio-attachment--incoming & {
      @include light-theme {
        &--active {
          background: $color-black-alpha-80;
        }
      }

      @include dark-theme {
        &--active {
          background: $color-white-alpha-70;
        }
      }
    }

    .module-message__audio-attachment--outgoing & {
      background: $color-white-alpha-40;

      &--active {
        background: $color-white-alpha-80;
      }
    }
  }
}