button.explain {
  font-size: var(--icon-size);
  margin: 0.3em;
  padding: 0.4em;
  border: none;
  outline: none;
  background: none;
}

button[data-uistate="PLAYER_READY"].explain#explain-play,
button[data-uistate="PLAYING"].explain#explain-play {
  display: initial;
}

button.explain#explain-play {
  display: none;
  animation: pulse-button 1s 5;
}

/* make play button pulse a few times */
@keyframes pulse-button {
  0% {
    color: var(--icon-inactive-color);
  }
  50% {
    color: var(--icon-active-color);
  }
  100% {
    color: var(--icon-inactive-color);
  }
}

div#record-panel {
  --offset: calc(-100% + 35px);
  position: fixed;
  left: 50%;
  top: 0px;
  z-index: 42;
  text-align: center;
  padding: 5px 10px;
  background-color: none;
  border: 1px solid var(--icon-inactive-color);
  border-top: none;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;

  display: none;
  flex-flow: column-reverse nowrap;
  justify-content: center;

  font-family: var(--ui-font-family);

  transform: translate(-50%, var(--offset));
  opacity: 0.2;
  transition: transform 0.4s ease-in-out 0.1s, opacity 0.25s linear 0s,
    background-color 0.4s linear 0s;
}

div[data-uistate="RECORDER_READY"]#record-panel,
div[data-uistate="RECORDER_PAUSED"]#record-panel,
div[data-uistate="RECORDING"]#record-panel {
  display: flex;
}

div#record-panel:hover {
  opacity: 0.5;
}

div#record-panel.open {
  transform: translate(-50%, 0);
  opacity: 1;
  background-color: var(--background-color);
}

div#record-panel .toggle-button {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 4rem;
  height: 2rem;
  background: transparent;
  border: none;
  transform: translateX(-55%);
  font-family: "Font Awesome 5 Free";
  font-size: 2rem;
  color: var(--foreground-color);
  transition: opacity 1s linear 0, color 0.5s linear 0;
}

div#record-panel .toggle-button:hover {
  color: var(--blueish);
}

div#record-panel[data-uistate="RECORDING"] .toggle-button {
  opacity: 0;
}

div#record-panel[data-uistate="RECORDING"] .toggle-button:hover,
div#record-panel[data-uistate="RECORDING"] .toggle-button:focus,
div#record-panel[data-uistate="RECORDING"].open .toggle-button {
  opacity: 1;
}

div#record-panel[data-uistate="RECORDING"] {
  border: none;
}

div#record-panel[data-uistate="RECORDING"].open {
  border: 1px solid var(--icon-inactive-color);
  border-top: none;
}

.controls-row {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  margin: 5px 0px;
}

#audio-meter {
  position: relative;
  height: 15px;
  min-width: 200px;
  flex-grow: 1;
}

.indicator {
  margin: 0;
  margin-right: 10px;
  padding: 0px;
  font-size: 15px;
  width: 20px;
  height: 15px;
  text-align: center;
  border: none;
  outline: none;
  background: none;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  color: var(--icon-inactive-color);
}

.indicator[title] {
  color: var(--icon-active-color);
}

.indicator::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

#record-indicator::before {
  content: "\f111";
  font-weight: 400;
  color: var(--redish);
}

#record-indicator[data-state="paused"]::before {
  content: "\f04c";
  font-weight: 900;
  color: var(--redish);
}

#record-indicator[data-state="recording"]::before {
  content: "\f111";
  font-weight: 900;
  color: var(--redish);
}

button.explain[disabled] {
  color: var(--shade4);
  opacity: 0.5;
}

button.record-button,
button.pause-button,
button.stop-button {
  color: var(--redish);
  opacity: 1;
  font-size: 25px;
}

button.mute-button.off {
  color: var(--redish);
}

button.caption-button.captioning {
  color: var(--redish);
}

:is(
    button.record-button,
    button.pause-button,
    button.stop-button,
    button.mute-button,
    button.caption-button
  ):hover {
  color: var(--light-red);
}

:is(
    button.record-button,
    button.pause-button,
    button.stop-button,
    button.mute-button,
    button.caption-button
  ):active {
  color: var(--dark-red);
}

#caption-indicator::before {
  content: "\f20a";
}

#microphone-indicator::before {
  content: "\f131";
}

#placeholder-indicator {
  opacity: 0;
}

#caption-indicator,
#microphone-indicator {
  opacity: 0;
  color: var(--redish);
}

#caption-indicator[data-state="captioning"],
#microphone-indicator[data-state="mute"] {
  opacity: 1;
}

.gain-slider {
  display: block;
  min-width: 200px;
  height: 20px;
  flex-grow: 1;
}

.controls-row output {
  font-size: 15px;
  height: 15px;
  width: 20px;
  text-align: right;
}

.controls-row select {
  min-width: 200px;
  flex-grow: 1;
  background-color: var(--shade1);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 1rem;
  height: 1.2rem;
  margin: 0.2rem;
}

span.capture-size {
  font-size: 80%;
  padding-right: 2em;
}

#explain-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background-color: white;

  display: none;
  flex-flow: column nowrap;
  justify-content: center;
}

#explain-panel[data-uistate="PLAYING"] {
  display: flex;
}

#explain-video {
  width: 100%;
  height: 100%;
  background-color: white;
  box-sizing: border-box;
  outline: none;
  object-fit: contain;

  /* make icons of controlbar slightly bigger */
  font-size: 1em;
}

.video-js .vjs-current-time {
  display: block !important;
}

/* fix wrong :before of video.js */
.vjs-icon-cancel:before,
.vjs-icon-previous-item:before,
.vjs-icon-next-item:before {
  content: none !important;
}
.video-js .vjs-icon-cancel .vjs-icon-placeholder:before {
  content: "\f119";
}
.video-js .vjs-icon-previous-item .vjs-icon-placeholder:before {
  content: "\f124";
}
.video-js .vjs-icon-next-item .vjs-icon-placeholder:before {
  content: "\f123";
}

.camera-panel {
  display: none;
}

.camera-panel[data-uistate="RECORDER_READY"].visible,
.camera-panel[data-uistate="RECORDER_PAUSED"].visible,
.camera-panel[data-uistate="RECORDING"].visible {
  display: block;
  position: fixed;
  left: auto;
  top: auto;
  right: 12px;
  bottom: 12px;
  z-index: 41;
  width: 33%;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  border: 4px solid var(--primary-color);
  overflow: auto;
  transform-origin: center;
}

.camera-panel[data-uistate="RECORDER_READY"].fullscreen,
.camera-panel[data-uistate="RECORDER_PAUSED"].fullscreen,
.camera-panel[data-uistate="RECORDING"].fullscreen {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  border: none;
}

/* when using greenscreen, but no background image, remove border */
#camera-canvas[data-has-background="false"] {
  border: none;
  border-radius: 0px;
}