/* audioplayer.css */
#audioplayer {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  background: black;
  align-items: center;
  padding: 10px;
  color: #EEE;
  gap: 10px;
  border-radius: 5px;
  width: 50vw;
  opacity: .6;
  font-family: var(--playbar-font-family);
  font-weight: lighter;
}

#audioplayer-time {
  text-align: center;
  min-width: 6em;
}

#audioplayer-controls {
  display: flex;
  flex-direction: row;
  flex: 1;
  gap: 10px;
  align-items: center;
}

#audioplayer-controls + #audioplayer-extras {
  border-left: 1px solid #EEE;

}

#audioplayer-extras {
  display:inline-flex;
  flex: 0;
  padding-left: 10px;
}

#audioplayer-play {
  color: transparent;
  background: transparent;
  box-sizing: border-box;
  padding: 0;
  
  width: 15px;
  height: 20px;  
  border-color: transparent transparent transparent #EEE;
  transition: 100ms all ease;
  will-change: border-width, height;
  
  border-style: solid;
  border-width: 10px 0px 10px 15px;
}

audio-player[paused] #audioplayer-play{
    border-style: double;
    height: 20px;
    border-width: 0px 0 0px 15px;
  }

#audioplayer-scrubber {
  width: 100%;
  flex: 2;

}

#audioplayer-volume {
  display: flex;
  align-items: center;
  gap: 0px;
  transition: gap 0.2s;
  
  & input[type=range] {
    width: 0;
    overflow: hidden;
    transition: width 0.2s, opacity 0.2s;
    opacity: 0;
  }
  
  & input[type=checkbox] {
    display: none;
  }
  
  &:hover {
    gap: 10px;
  }
  
  &:hover input[type=range], &:focus input[type=range] {
    width: 100px;
    opacity: 1;
  }
}

#audioplayer-volume-mute {
  background: transparent;
  color: transparent;
  border: 0 none;
  padding: 0;
  
  width: 25px;
  height: 25px;
  
  background-image: url('data:image/png;base64,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');
  background-size: contain;
}

audio-player[muted] #audioplayer-volume-mute {
  background-image: url('data:image/png;base64,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');
}

#audioplayer-menu, #audioplayer-menu::before, #audioplayer-menu::after {
  background: white;
}
#audioplayer-menu {
  cursor: pointer;
  color: transparent;
  border: 0 none;
  padding: 0;
  
  border-radius: 5px;
  height: 5px;
  width: 5px;
  
  position: relative;
  
  &::before, &::after {
    content: '';
    
    display: block;
    border-radius: 5px;
    height: 5px;
    width: 5px;
    
/*    background: white;*/
    top: -10px;
    position: absolute;
  }
  
  &::after {
    bottom: -10px;
    top: auto;
  }
}


#notebook {
  cursor: pointer;
  background: transparent;
  color: transparent;
  border: 1px solid #EEE;
  padding: 0;
  width: 20px;
  height: 25px;
  border-radius: 3px;
  
  position: relative;
  
  &::before, &::after {
    content: '';
    
    display: block;
    position: absolute;
    
    border: 1px solid #EEE;
    height: 1px;
    width: 2px;
    border-radius: 5px;
    
    left: -3px;
    top: 5px;
  }
  
  &::after {
    top: auto;
    bottom: 5px;
  }
}

#key {

  cursor: pointer;
  background: transparent;
  color: transparent;
  border: 0 none;
  padding: 0 0 0 10px;  
  height: 25px;
  width: 20px;
  margin-right: 10px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQIAAAHgCAYAAABOw2PZAAAACXBIWXMAAAsTAAALEwEAmpwYAAAF0WlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDIgNzkuYTZhNjM5NjhhLCAyMDI0LzAzLzA2LTExOjUyOjA1ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjUuOSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjQtMTEtMjRUMTQ6MzM6MDMtMDY6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDI0LTExLTI0VDE0OjM3OjI2LTA2OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDI0LTExLTI0VDE0OjM3OjI2LTA2OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDplOTQ5OTA2NS0yZTBjLTQ0NDgtODFmZS1hMmE4MzI1YThjMDYiIHhtcE1NOkRvY3VtZW50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');
  background-size: contain;
  background-repeat: no-repeat;


}

/* slider overrides from https://range-input-css.netlify.app/ */

/*********** Baseline, reset styles ***********/
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 25rem;
}

/* Removes default focus */
input[type="range"]:focus {
  outline: none;
}


/******** Chrome, Safari, Opera and Edge Chromium styles ********/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
  background-color: var(--firmament-green);
  border-radius: 0.5rem;
  height: 2rem;

}

/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  margin-top: 0rem; /* Centers thumb on the track */
  background-color: white;
  opacity: 1;
  border-radius: 0.5rem;
  height: 2rem;
  width: 1rem;
}

input[type="range"]:focus::-webkit-slider-thumb {
  outline: 3px solid #f4c415;
  outline-offset: 0.125rem;
}

/*********** Firefox styles ***********/
/* slider track */
input[type="range"]::-moz-range-track {
  background-color: var(--firmament-green);
  border-radius: 0.5rem;
  height: 2rem;
}

/* slider thumb */
input[type="range"]::-moz-range-thumb {
  appearance: none;
  margin-top: 0rem; /* Centers thumb on the track */
  background-color: white;
  opacity: 1;
  border-radius: 0.5rem;
  height: 2rem;
  width: 1rem;
}

input[type="range"]:focus::-moz-range-thumb{
  outline: 3px solid #f4c415;
  outline-offset: 0.125rem;
}