@import "TOKENS";
$color_bg: #111111;
$color_main: #aaaaaa;
$color_main_hover: #dddddd;
$color_highlight: #db4343;
$color_highlight_2: #ea8c52;



.audioplayer.skin-customcontrols{
  position: static;


  .custom-play-btn,.custom-pause-btn {

    cursor: pointer;
  }
  &:not(.design-animation){

    .custom-play-btn{
      display: block;
    }
    .custom-pause-btn{
      display: none;
    }
    &.is-playing{

      .custom-pause-btn{
        display: block;
      }
      .custom-play-btn{
        display: none;
      }
    }
  }

  &.design-animation{

    .custom-play-btn,.custom-pause-btn {

      $transition-property: all;
      $transition-duration: 0.3s;
      $transition-timing: ease-out;

      @include apply_transition($transition-property, $transition-duration, $transition-timing);
    }

    .custom-play-btn{
      opacity:1;
      visibility: visible;
    }
    .custom-pause-btn{
      opacity:0;
      visibility: hidden;
    }

  }

  .meta-artist-con{
    display: none;
  }

  .feed{
    display: none;
  }

  &.position-relative{
    position: relative;

    .custom-pause-btn{
      position: absolute;
      top:0;
      left:0;
    }
  }
}


.audioplayer.skin-customcontrols.is-playing{

  .custom-pause-btn{
    opacity:1;
    visibility: visible;
  }
  .custom-play-btn{
    opacity:0;
    visibility: hidden;
  }
}


.audioplayer.skin-customcontrols.position-relative{
  position: relative;


  .playbtn-darkround,.pausebtn-darkround{
    position: relative;
    top: 0; left:0;

    transform: translate3d(0,0,0);


  }

  .pausebtn-darkround{
    position: absolute;
  }
}