@import 'main';

$playerHeight: 32px;
$playerWidth: 390px;
$iconSize: 16px;
.simple-player {
  width: $playerWidth;
  height: $playerHeight;
  background-color: $color_paper;
  border: solid 1px $color_table_border;
  @include border-radius($default_border_radius);
  position: relative;
  padding-right: 5px;
  @include flexbox();
  @include justify-content(space-between);
  @include align-items(center);

}

.timeline {
  width: 80%;
  flex-grow: 1;
  flex-basis: 0;
  margin-right: 5px;
}

.volume {
  width: 0;
  @include transition();
}

.timeline, .volume {
  height: 4px;
  @include border-radius(2px);
  background-color: $color_grey;
  cursor: pointer;
  .timeline-inline, .volume-inline {
    width: 0;
    height: 4px;
    @include border-radius(2px);
    background-color: $color_primary;
  }
}

.full-width {
  width: 100%;
}

.volume-container {
  padding: 0 6px;
  max-width: 115px;
  @include flexbox();
  @include justify-content(space-between);
  @include align-items(center);
  &:hover {
    padding: 0 12px;
    .volume {
      width: 45px;
    }
  }
}

.playButton, .mute-button {
  margin: 0 10px;
  height: 24px;
  width: 24px;
  background: none;
  color: $color_primary;
  @include border-radius(50%);
  i {
    font-size: $iconSize !important;
    line-height: $iconSize + 1;
    margin-top: -1px;
  }
}

.mute-button {
  border: none;
  margin: 0 -2px 0 0;
  &:active {
    background: none !important;
  }
}

.waiting-icon div {
  margin-left: -4px;
}

.timer {
  height: 16px;
  font-family: $font_roboto;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: $color_dark;
}