.cljcastr-player-clickable {
  cursor: pointer;
}

.cljcaster-player-hidden {
  display: none;
}

#cljcastr-player-episode-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#cljcastr-player-timeline {
  max-width: 90%;
  background-color: rgb(241 243 244 / 0.2);
  border-radius: 30px;
  width: 300px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
}

span.cljcastr-player-timeline {
  font-size: 0.75em;
}

#cljcastr-player-volume {
  width: 15px;
  height: 15px;
  /* Volume not currently implemented */
  display: none;
}

#cljcastr-player-speed {
  /* Speed not currently implemented */
  display: none;
}

/* Accessible buttons borrowed with pride from: */
/* https://www.freecodecamp.org/news/how-to-make-your-fancy-svg-button-accessible-83c9172c3c15/ */

#cljcastr-player-controls {
  display: flex;
  justify-content: center;
  gap: 5px;
}

#cljcastr-player-controls > button {
  cursor: pointer;
  padding: 0px;
  background-color: rgb(241 243 244 / 0.2);
  border: none;
  &:focus {
    padding: 1px;
    background-color: buttonface;
    outline: 1px solid buttonborder;
  }
  &:hover {
    svg {
      transform: scale(1.2);
    }
  }
  &::-moz-focus-inner {
    border: 0;
  }
  svg {
    outline: none;
    transition: transform 0.15s linear;
  }
}

.sr-only {
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

svg.control {
  width: 32px;
  height: 32px;
}

path.drop-shadow {
  fill: #05154e;
}

path.drop-shadow-off {
  fill: #4b4743;
}

path.bg {
  fill: #021760;
}

path.bg-off {
  fill: #7a736a;
}

path.fg {
  fill: #fafafa;
}

path.shine {
  fill: #268e98;
}

path.shine-off {
  fill: #918e8a;
}

#tracks {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  gap: 3px;
}