.settings {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  font-size: 1.6rem;
  color: #FFF;
  background: rgba(0,0,0,0.85);
  overflow: hidden;
  opacity: 1;
  transition: opacity 150ms linear, visibility 0s;
  visibility: visible;
  will-change: opacity;
}

.settings.hidden {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s, 150ms;
}

/**
 * COMPLEX
 *
 * The camera app has fixed rotation,
 * this means that when the orientation of the
 * device changes, the application doesn't rotate.
 *
 * Although the settings menu must rotate. This
 * means we need to use CSS transforms to reposition
 * the settings menu so that it appears rotate with
 * the orientation of the device.
 *
 */

/**
 * @deg90
 */

.deg90 .settings {
  width: 100vh;
  height: 100vw;
  transform:
    rotate(270deg)
    translate(-100%, 0);
  transform-origin: 0 0;
}

/**
 * @deg180
 */

.deg180 .settings {
  transform: rotate(180deg);
}

/**
 * @deg270
 */

.deg270 .settings {
  width: 100vh;
  height: 100vw;
  transform:
    rotate(90deg)
    translate(0px, -100vw);
  transform-origin: 0 0;
}

/** Pane
 ---------------------------------------------------------*/

.pane {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 0 1.5rem;
}

.pane > .inner {
  height: 100%;
}

/**
 * @deg90
 */

.deg90 .pane > .inner {
  padding-right: 7rem;
}

/**
 * @deg270
 */

.deg270 .pane > .inner {
  padding-left: 7rem;
}

/** Pane 1
 ---------------------------------------------------------*/

/**
 * [show-pane=2]
 */

[show-pane=pane-2] .pane-1 {
  transform: translateX(-100%);
  visibility: hidden;
}

/** Pane 2
 ---------------------------------------------------------*/

.pane-2 {
  transform: translateX(100%);
  visibility: hidden;
}

/**
 * [show-pane=2]
 */

[show-pane=pane-2] .pane-2 {
  transform: translateX(0);
  visibility: visible;
}

/** Inner
 ---------------------------------------------------------*/

.settings_inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/** Header
 ---------------------------------------------------------*/

/**
 * 1. Space it out from under the
 *    setting menu button.
 */

.settings_header {
  position: relative;
  height: 9rem;
  margin-right: 5rem; /* 1 */
  line-height: 9rem;
}

/** Title
 ---------------------------------------------------------*/

/**
 * 1. In case of the title being longer than the header
 *    we show ellipsis and prevent line wrapping
 */
.settings_title {
  padding: 0 1.5rem 0 3rem;
  font-size: 2.4rem;
  font-weight: 300;
  font-style: italic;
  line-height: 9rem;
  color: rgba(255,255,255,0.8);
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 1 */
}

/**
 * [dir=rtl]
 */

[dir="rtl"] .settings_title {
  text-align: center;
}

/** Items
 ---------------------------------------------------------*/

.settings_items {
  flex: 1;
  overflow: scroll;
}

/** Close
 ---------------------------------------------------------*/

/**
 * @extends .hud a
 */

.settings_close {
  position: absolute;
  top: 0; right: 0;
  margin: 0;
  border-width: 2rem 1.5rem;
  background-color: #008eab;
}

/**
 * @deg90,
 * @deg270
 */

.deg90 .settings_close,
.deg270 .settings_close {
  border-width: 1.5rem 2rem;
}

/**
 * @deg90
 */

.deg90 .settings_close {
  top: auto;
  bottom: 0;
}

/**
 * @deg270
 */

.deg270 .settings_close {
  right: auto;
  left: 0;
}