/**
 * tiny-player v.0.2.0
 * irubataru.com
 *
 * Copyright (c) 2018-2020 Jonas Rylund Glesaaen
 *
 * MIT License
 */

.iru-tiny-player {
  position: relative;
  /* border: 0.2ex solid; */
  max-width: 40vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  
  
}

.iru-tiny-player .song-main-info {
  margin: 10px 0px 10px 20px;
  font-size: 1.25rem;


}


.song-main-info {
  display: flex;
  flex-direction: row;
  align-items: center;
}

@media screen and (max-width: 480px) {
  .iru-tiny-player .song-main-info {
    margin: 2ex 1ex;
    font-size: 1rem;
  }
}

.iru-tiny-player .icon {
  margin-right: 1ex;
 


  border-bottom: none;
  position: relative;
}


@media screen and (max-width: 480px) {
  .iru-tiny-player .icon {
    margin-right: 0.25ex;
    min-width: 1rem;
    flex-basis: 1rem;
  }
}

.iru-tiny-player .icon:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-transform: none !important;
}

.iru-tiny-player .song-main-info .icon.fa-stop {
  margin-right: 2ex;
}

@media screen and (max-width: 480px) {
  .iru-tiny-player .song-main-info .icon.fa-stop {
    margin-right: 0.5ex;
  }
}

.iru-tiny-player .song-main-info .song-timer {
  /* margin: 0ex 1ex; */
  
  white-space: nowrap;
}

.song-timer {
  /* background-color: aqua; */
  width:50vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
 
  
}

.iru-tiny-player .song-main-info .song-title {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
}

.iru-tiny-player .song-seek {
  position: absolute;
  width: 40vw;
  height: 20%;
  left:200px;
  background-color: var(--color-1);
 
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  
}

.iru-tiny-player .song-progress {
  position: absolute;
  background-color: var(--color-3);
  width: 0%;
  max-width:40vw;
 
 
  height: 20%;
 left:200px;
}






.pause::after {
  content:'pause';
  text-transform: uppercase;
}

.play, .pause {
  margin-right:20px;
  margin-left:0px;
  margin-bottom:0px;
  width:90px;
}
.play::after {
  content:'play';
  text-transform: uppercase;
 
}

.sound-title {
  margin-bottom: 10px;
}

@media screen and (max-width: 800px) {

  .iru-tiny-player {
   
    max-width: 90vw;
  
    
  }

  .song-timer {
    /* background-color: aqua; */
    width:90vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
   
    
  }


.iru-tiny-player .song-main-info .song-timer {
  margin: 0 5vw 0 12vw;
  
  white-space: nowrap;
}
  
  .iru-tiny-player .song-main-info .song-title {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
  }
  
  .iru-tiny-player .song-seek {
    position: absolute;
    width: 30vw;
    height: 20%;
    left:35vw;
    background-color: var(--color-1);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
  }
  
  .iru-tiny-player .song-progress {
    position: absolute;
    background-color: var(--color-3);
    width: 0%;
    max-width:30vw;
   
   
    height: 20%;
   left:35vw;
  }
  
  .pause::after {
    content:'pause';
    text-transform: uppercase;
  }
  
  .play, .pause {
    margin-right:20px;
    margin-left:20px;
    margin-bottom:0px;
    width:100px;
  }
  .play::after {
    content:'play';
    text-transform: uppercase;
   
  }
  
  .sound-title {
    margin-bottom: 10px;
  }


.iru-tiny-player .song-main-info {
  margin: 10px 20px 10px 0px;
  font-size: 1.25rem;
  max-width:calc(100vw - 60px);

}



}


@media screen and (max-width: 480px) {
  .iru-tiny-player .icon.fa-times {
    margin: 2ex 1.5ex;
    font-size: 1rem;
  }

}