/**
 * 1. Vertically align indicators
 * 2. Prevent interaction conflict.
 */

.indicators {
  display: flex; /* 1 */
  position: absolute;
  top: 0; left: 0;
  z-index: 1;
  height: 100%;
  padding: 0 1.5rem;
  flex-direction: column;
  justify-content: center; /* 1 */
  pointer-events: none; /* 2 */
}

/**
 * hidden
 */

.indicators.hidden {
  display: none;
}

/**
 * deg180
 */

.deg180 .indicators {
  padding: 0 0.8rem;
}

/** Indicators
 ---------------------------------------------------------*/

.indicators li {
  display: none;
  height: 1.8rem;
  width: 1.8rem;
  line-height: 1;
  margin-bottom: 1.2rem;
  border-radius: 4px;
  text-align: center;
  background-color: rgba(255,255,255,0.8);
  color: #008EAB;
}

.indicators li:before {
  font-size: 1.8rem;
}

/**
 * visible
 */

.indicators[hdr=on] .indicator_hdr,
.indicators[geolocation=on] .indicator_geolocation {
  display: block;
}

/**
 * hidden
 */

.indicators[recording=true] .indicator_hdr,
.indicators[mode=video] .indicator_hdr,
.indicators[recording=true] .indicator_countdown,
.indicators[countdown=off] .indicator_countdown {
  display: none;
}

/** Indication Geolocation
 ---------------------------------------------------------*/

li.indicator_geolocation:before {
  font-size: 1.3rem;
  line-height: 1.4;
}

/** Indicator Countdown
 ---------------------------------------------------------*/

.indicators .indicator_countdown {
  display: block;
}

.indicators .indicator_countdown:before {
  font-size: 1.7rem;
}

/** Indicator Battery
 ---------------------------------------------------------*/

.indicators .indicator_battery {
  width: 2.5rem;
  height: 0.9rem;
  line-height: 0.9rem;
  margin-left: -0.3rem;
  color: #D92E2E;
  background: transparent;
}

.indicators .indicator_battery:before {
  font-size: 2.5rem;
}

/**
 * deg90,
 * deg270
 */

.deg90 .indicators .indicator_battery,
.deg270 .indicators .indicator_battery {
  margin-top: 0.9rem;
  margin-left: -0.4rem;
}

/**
 * battery-enabled=true
 */

.indicators[battery-enabled=true] .indicator_battery {
  display: block;
}

/**
 * battery=low,
 * battery=verylow,
 * battery=critical
 */

.indicators[battery='low'] .indicator_battery,
.indicators[battery='verylow'] .indicator_battery,
.indicators[battery='critical'] .indicator_battery {
  display: block;
}

/**
 * battery=verylow,
 * battery=critical
 */

.indicators[battery='verylow'] .indicator_battery:before,
.indicators[battery='critical'] .indicator_battery:before {
  content: "battery-1";
}

/**
 * battery=critical
 */

.indicators[battery='critical'] .indicator_battery {
  animation: 2s linear infinite indicator_battery-animation;
}

/** Battery Animation
 ---------------------------------------------------------*/

@keyframes indicator_battery-animation {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}