@import "import";

.audioPlayer {
  @include flex($justify-content: flex-start);
  gap: spacer(3);
  padding: spacer(4);
  background-color: color(white);
  border-radius: rounded(2);
  margin: 0;

  @include breakpoint(medium) {
    padding: spacer(6);
  }

  .coverImageContainer {
    width: 6rem;
    height: 6rem;
  }

  .inner {
    @include flex(column);
    gap: spacer(1);
    flex-grow: 1;
  }

  .title {
    width: 100%;
    color: color(black);
  }

  .timeStamps {
    @include flex($justify-content: space-between);
    color: color(gray-500);
    width: 100%;
  }

  .progressBarContainer {
    display: flex;
    width: 100%;

    .progressBar {
      @include expand-hitbox(spacer(2));
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 0.2rem;
      background: color(gray-400);
      cursor: pointer;

      @mixin thumb {
        appearance: none;
        -webkit-appearance: none;
        width: 0.8rem;
        height: 0.8rem;
        background: color(orange);
        border: none;
        border-radius: rounded(circle);
      }

      &::-webkit-slider-thumb {
        @include thumb;
        margin-top: -0.3rem;
      }

      &::-moz-range-thumb {
        @include thumb;
      }

      &::-ms-thumb {
        @include thumb;
      }

      @mixin track {
        appearance: none;
        -webkit-appearance: none;
        height: 0.2rem;
      }

      &::-webkit-slider-runnable-track {
        @include track;
      }

      &::-moz-range-track {
        @include track;
      }

      &::-ms-track {
        @include track;
        border-color: transparent;
        color: transparent;
      }
    }
  }

  .playPauseButton {
    width: 4rem;
    height: 4rem;
  }

  .iconGroup {
    @include icon-group;
    width: 100%;
    height: 100%;
  }

  .icon {
    color: color(black);
    transform-origin: center;
    width: 100%;
    height: 100%;
  }
}