@import "import";

.audioPlayer {
  @include flex(row, flex-start, flex-start, $gap: spacer(3));
  width: 100%;
  height: 2.4rem;

  .playPauseButton {
    height: 100%;

    &:active {
      transform: scale(0.98);
    }

    .iconGroup {
      @include icon-group;
    }
  }

  .progressBarContainer {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;

    &.active {
      cursor: pointer;
    }

    .progressBar {
      transition: transform 0.1s linear;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      will-change: transform;

      &.waveform {
        transform: scaleX(1);
        transform-origin: center;
      }

      &.mask {
        background-color: color(container);
        opacity: 0.9;
        transform-origin: right;
        transform: scaleX(0);
        overflow: hidden;
        z-index: z(1);
      }
    }
  }
}