.player {
  width: 100%;
  height: 0;
  position: relative;
  overflow: hidden;
}
.player.unrestricted {
  height: 100%;
}
.player.unrestricted video {
  object-fit: contain;
}
.player.a960-293 {
  padding-bottom: 30.52%;
}
.player.a35-22 {
  padding-bottom: 62.9%;
}
.player.a16-9 {
  padding-bottom: 56.25%;
}
.player:fullscreen {
  padding-bottom: 100vh;
}
.player:-webkit-full-screen {
  padding-bottom: 100vh;
}
.player:-moz-full-screen {
  padding-bottom: 100vh;
}
.player:-ms-fullscreen {
  padding-bottom: 100vh;
}
.player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.controls {
  padding: 0;
  position: absolute;
  bottom: -80px;
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(37, 37, 37, 0) 10%, rgba(37, 37, 37, 0.6) 80%);
  transition: all 0.2s ease-in 5s;
}
.player:hover .controls {
  bottom: 0;
  transition: all 0.2s ease-out;
}
.time {
  position: absolute;
  right: 30px;
  bottom: 100%;
  padding-bottom: 14px;
}
.progress {
  height: 8px;
  width: calc(100% - 40px);
  background: rgba(60, 60, 60, 0.6);
  margin: auto;
  border-radius: 6px;
  position: absolute;
  left: 20px;
  bottom: 100%;
  transition: height 0.1s ease-in-out;
}
.progress:hover {
  height: 10px;
}
.progress-filled {
  background: var(--primary);
  width: 0%;
  height: 100%;
  border-radius: 6px;
  transition: all 0.1s;
}
.controls-main {
  width: calc(100% - 40px);
  margin: auto;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.controls-left,
.controls-right {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.controls-left {
  margin-left: 10px;
}
.controls-right {
  margin-right: 10px;
  justify-content: flex-end;
  gap: 20px;
}
.controls-right div {
  justify-content: flex-end;
}
.volume {
  display: flex;
  align-items: center;
}
.volume-btn #volume-off,
.volume-btn #volume-high {
  opacity: 0;
}
.volume-btn.loud #volume-high {
  opacity: 1;
}
.volume-btn.muted #volume-off {
  opacity: 1;
}
.volume-btn.muted #volume-high,
.volume-btn.muted #volume-low {
  opacity: 0;
}
.volume-slider {
  height: 8px;
  width: 80px;
  background: rgba(60, 60, 60, 0.6);
  border-radius: 6px;
  position: relative;
}
.volume-filled {
  background: var(--white);
  width: 100%;
  height: 100%;
  border-radius: 6px;
  transition: width 0.2s ease-in-out;
}
.play-btn:hover.play-btn:before,
.play-btn:hover.play-btn:after {
  background: var(--primary);
}
.volume-btn :hover,
.fullscreen :hover {
  filter: invert(24%) sepia(12%) saturate(455%) hue-rotate(10deg) brightness(94%) contrast(83%);
}
.volume-btn svg :hover,
.fullscreen svg :hover {
  filter: none;
}
.play-btn {
  width: 20px;
  height: 20px;
  position: relative;
  transform: rotate(-90deg) scale(0.8);
  transition: -webkit-clip-path 0.1s ease-in 0.1s, shape-inside 0.1s ease-in 0.1s, transform 0.5s;
}
.play-btn.paused {
  transform: rotate(0deg);
}
.play-btn:before,
.play-btn:after {
  content: "";
  position: absolute;
  background: white;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: inherit;
}
.play-btn:before {
  -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 40%, 0 40%);
  shape-inside: polygon(0 10%, 100% 10%, 100% 40%, 0 40%);
}
.play-btn:after {
  -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 90%, 0 90%);
  shape-inside: polygon(0 60%, 100% 60%, 100% 90%, 0 90%);
}
.play-btn.paused:before {
  -webkit-clip-path: polygon(10% 0, 90% 51%, 90% 51%, 10% 51%);
  shape-inside: polygon(0 0, 100% 51%, 100% 51%, 0 51%);
}
.play-btn.paused:after {
  -webkit-clip-path: polygon(10% 49.5%, 80% 49.5%, 90% 49.5%, 10% 100%);
  shape-inside: polygon(10% 49.5%, 80% 49.5%, 90% 49.5%, 10% 100%);
}
button:focus {
  outline: none;
}
.fullscreen {
  display: flex;
  justify-content: center;
}