.hud {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 9rem;
  z-index: 1;
  align-items: center;
  justify-content: space-between;
  opacity: 1;
  transition: opacity 200ms linear, visibility 0s;
  visibility: visible;
  direction: ltr;

  /* Reduce the overpaint of the camera app */
  border-left: 0.1rem solid transparent;
  border-right: 0.1rem solid transparent;
}

/**
 * hidden
 */

.hud.hidden,
.hud[countdown=active],
.hud[recording=true] {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s, 200ms;
}

/**
 * disabled
 */

.hud[camera=busy] {
  pointer-events: none;
}

/** Buttons
 ---------------------------------------------------------*/

/**
 * 1. Extend touchable zone.
 * 2. When the button is pressed
 *    it changes color instanly.
 *    When it is released it transitons
 *    back to the default color.
 */

.hud_btn,
.settings_close {
  height: 5rem;
  width: 5rem;
  font-size: 3rem;
  line-height: 5rem;
  text-align: center;
  border-radius: 50%;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: rgba(0,0,0,0.12);
  background-clip: padding-box; /* 1 */
  border: solid 1.5rem transparent; /* 1 */
  -moz-box-sizing: content-box; /* 1 */
  color: #fff;
}

.hud_btn:active {
  background-color: #00b9df;
}

/** Camera Button
 ---------------------------------------------------------*/

/**
 * 1. Hidden by default
 */

.hud_camera {
  opacity: 0; /* 1 */
}

/**
 * camera-enabled=true
 */

.hud[camera-enabled=true] .hud_camera {
  opacity: 1;
}

/**
 * camera-enabled=false
 */

.hud[camera-enabled=false] .hud_camera {
  pointer-events: none;
}

/** Flash Button
 ---------------------------------------------------------*/

/**
 * 1. Hidden by default
 */

.hud_flash {
  width: 5.8rem;
  height: 5.8rem;
  line-height: 5.8rem;
  font-size: 3.2rem;
  opacity: 0; /* 1 */
}

/**
 * flash-enabled=true
 */

.hud[flash-enabled=true] .hud_flash {
  opacity: 1;
}

/**
 * flash-enabled=false
 */

.hud[flash-enabled=false] .hud_flash {
  pointer-events: none;
}