$audio_player_base_height: 50px !default;
$audio_player_base_bg_color: #333 !default;
$audio_player_base_text_color: #fff !default;

$audio_player_btn_bg_color: #fff !default;
$audio_player_btn_height: $audio_player_base_height !default;
$audio_player_btn_margin: 4px !default;
$audio_player_btn_padding: 11px !default;

$audio_player_spacer_width: 10px !default;

$audio_player_info_font_size: 19.2px !default;
$audio_player_time_font_size: 23px !default;
$audio_player_time_margin: 20px !default;

$audio_player_marquee_margin: $audio_player_spacer_width !default;
$audio_player_marquee_width: calc(100% - 180px) !default;

$audio_player_play_btn_border_color: $audio_player_btn_bg_color !default;
$audio_player_play_btn_direction_width: 36% !default;
$audio_player_play_btn_inner_height: 30px !default;
$audio_player_play_btn_inner_width: 30px !default;
$audio_player_play_btn_triangle_color: $audio_player_base_bg_color !default;

$audio_player_progress_bg_color: #4a4a4a !default;

@keyframes marquee1 {
  0% {
    transform:translateX(100%);
  }
  100%{
    transform:translateX(-100%);
  }
}
@keyframes marquee2 {
  0% {
    transform:translateX(100%);
  }
  100%{
    transform:translateX(-200%);
  }
}
@keyframes marquee3 {
  0% {
    transform:translateX(100%);
  }
  100%{
    transform:translateX(-300%);
  }
}
@keyframes marquee4 {
  0% {
    transform:translateX(100%);
  }
  100%{
    transform:translateX(-400%);
  }
}
@keyframes marquee5 {
  0% {
    transform:translateX(100%);
  }
  100%{
    transform:translateX(-500%);
  }
}

.noselect {
  cursor: default;
  /* http://stackoverflow.com/a/4407335/4956731 */
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           /* non-prefixed version, currently
                                  not supported by any browser */
}

.hidden {
  display: none !important;
}

.audio_player {
  display: flex;
  flex-direction: row;
  height: $audio_player_base_height;
  background-color: $audio_player_base_bg_color;
  width: 100%;

  .spacer {
    width: $audio_player_spacer_width;
  }

  .audio_progress_container {
    position: relative;
    height: 100%;
    flex-grow: 1;
  }
  .audio_progress {
    background-color: $audio_player_progress_bg_color;
    height: 100%;
    width: 0;
    will-change: width;
  }
  .audio_progress_overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .audio_info_marquee {
    overflow: hidden;
    /* to make room for .audio_time_progress */
    width: $audio_player_marquee_width;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: $audio_player_marquee_margin;
  }
  .audio_info {
    display: none;
    width: 100%;
    white-space: nowrap;
    word-break: break-all;
    margin: 0;
    font-size: $audio_player_info_font_size;
    color: $audio_player_base_text_color;
  }
  .audio_time_progress {
    margin-right: $audio_player_time_margin;
    align-self: center;
    color: $audio_player_base_text_color;
    font-size: $audio_player_time_font_size;
  }

  .audio_button {
    padding-left: $audio_player_btn_padding;
    padding-right: $audio_player_btn_padding;
    margin-left: $audio_player_btn_margin;
    margin-right: $audio_player_btn_margin;
    cursor: pointer;
    align-self: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: $audio_player_btn_height;
  }

  /* http://codepen.io/aralon/pen/NqGWXZ */
  .play_pause_button {

    .play_pause_inner {
      height: $audio_player_play_btn_inner_height;
      width: $audio_player_play_btn_inner_width;
      overflow: hidden;
      position: relative;
    }
    .left {
      height: 100%;
      float: left;
      background-color: $audio_player_btn_bg_color;
      width: $audio_player_play_btn_direction_width;
      transition: all 0.25s ease;
      overflow: hidden;
    }
    .triangle_1 {
      transform: translate(0, -100%);
    }
    .triangle_2 {
      transform: translate(0, 100%);
    }
    .triangle_1,
    .triangle_2 {
      position: absolute;
      top: 0;
      right: 0;
      background-color: transparent;
      width: 0;
      height: 0;
      border-right: 30px solid $audio_player_play_btn_triangle_color;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
      transition: transform 0.25s ease;
    }
    .right {
      height: 100%;
      float: right;
      width: $audio_player_play_btn_direction_width;
      background-color: $audio_player_btn_bg_color;
      transition: all 0.25s ease;
    }
    &.paused .left {
      width: 50%;
    }
    &.paused .right {
      width: 50%;
    }
    &.paused .triangle_1 {
      transform: translate(0, -50%);
    }
    &.paused .triangle_2 {
      transform: translate(0, 50%);
    }
  }

  .skip_button {

    &.back {
      transform: rotate(180deg);
    }

    .skip_button_inner {
      display: flex;
      flex-direction: row;
    }
    .right_facing_triangle {
      width: 0;
      height: 0;
      border-left: 16px solid $audio_player_play_btn_border_color;
      border-top: 16px solid transparent;
      border-bottom: 16px solid transparent;
    }
  }

  @media screen and (min-width: 370px) {
    .audio_info {
      display: initial;
      animation: marquee5 10s cubic-bezier(0, 0.23, 0.6, -0.09) infinite;
    }
  }

  @media screen and (min-width: 450px) {
    .audio_info {
      animation: marquee4 10s cubic-bezier(0, 0.23, 0.7, -0.09) infinite;
    }
  }

  @media screen and (min-width: 550px) {
    .audio_info {
      animation: marquee3 10s cubic-bezier(0, 0.23, 0.85, -0.09) infinite;
    }
  }

  @media screen and (min-width: 650px) {
    .audio_info {
      animation: marquee2 10s cubic-bezier(0, 0.23, 1, -0.09) infinite;
    }
  }

  @media screen and (min-width: 720px) {
    .audio_info {
      animation: initial;
    }
  }
}