html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: 10px;
  overflow: hidden;
  background: white;

  -moz-user-select: none;
}

label, a, p, small, gaia-subheader {
  -moz-user-select: none;
}

section[role="region"], section[role="dialog"] {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
}

section[role="region"] {
  transition: transform var(--transition-duration) ease,
              visibility var(--transition-duration);
  visibility: hidden;
}
html[dir="ltr"] section[role="region"] { transform: translateX(100%); }
html[dir="rtl"] section[role="region"] { transform: translateX(-100%); }

section[role="region"].prev {
  visibility: hidden;
}
html[dir="ltr"] section[role="region"].prev { transform: translateX(-100%); }
html[dir="rtl"] section[role="region"].prev { transform: translateX(100%); }

html[dir] section[role="region"].current {
  transform: translateX(0);
  visibility: visible;
}

section[role="dialog"] {
  transition: visibility var(--transition-duration),
              opacity var(--transition-duration) ease;
  opacity: 0;
  visibility: hidden;
}

section[role="dialog"].displayed {
  opacity: 1;
  visibility: visible;
}

/**
 * Headers should not scroll with the rest of the page, except for #general.
 */
section[role="region"] > header, section[role="dialog"] > header {
  position: absolute;
}

section[role="region"] > div, section[role="dialog"] > div {
  position: absolute;
  top: 5rem;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 5rem);
  overflow-y: scroll;
}

aside.pack-end > label {
  margin-top: 0.5rem;
}

/* Temporary styles until being ported to use gaia-list */
section[data-type="list"] li gaia-checkbox {
    margin-inline-start: 1.5rem;
    padding: 1.5rem 0;
    width: calc(100% - 3rem) !important;
}

/* XXX we're trying to offset what we have inherted from lists.css only to make
   things look like Settings app more. We actually need to restructure the
   kb settings DOM & this CSS to make such mimicking easier */

[data-type="list"] header {
  padding: 0 0;
  text-transform: none;
}

ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

ul li {
  box-sizing: border-box;
  position: relative;
  min-height: 6rem;
  border-bottom: 0.1rem solid #e6e6e3;
  color: #000;
}

ul li:last-child {
  border-bottom: none;
}

ul li label:not([for]) {
  background: none;
}

ul li > *, ul li > label > * {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

ul li label {
  text-transform: none;
}

input[type=range] {
  -moz-appearance: none;
  border: none;
  background: none;
  width: calc(100% - 2rem);
  height: 3rem;
}

input[type=range]:disabled {
  opacity: 0.4;
}

input[type=range]:-moz-focusring {
  outline: none;
}

ul li > label input[type="range"] {
  top: calc(50% - 1.5rem);
  height: 3rem;
  width: calc(100% - 2rem);
  margin-bottom: 0.2rem;
}

input[type=range]::-moz-range-track {
  height: 0.1rem;
  background-color: #7e7e7e;
}

input[type=range]::-moz-range-progress {
  height: 0.3rem;
  background-color: #01c5ed;
}

input[type=range]::-moz-range-thumb {
  width: 2.8rem;
  height: 2.8rem;
  border: solid 0.1rem transparent;
  border-radius: 3rem;
  transition: border 0.15s ease;
  box-sizing: border-box;
  background: image-set(url("images/range_thumb.png") 1x, url("images/range_thumb@1.5x.png") 1.5x, url("images/range_thumb@2x.png") 2x, url("images/range_thumb@2.25x.png") 2.25x) no-repeat 50% 50%;
  background-size: 2.8rem 2.8rem;
}

input[type=range]:not(:disabled):active::-moz-range-thumb {
  border: solid 0.4rem #01c5ed;
}

input:focus {
  box-shadow: inset 0 -0.1rem 0 #00caf2;
  border-bottom-color: #00caf2;
}

[data-type="list"] {
  padding: 0;
}

[data-type="list"] li {
  margin-inline-start: 1.5rem;
  width: calc(100% - 1.5rem);
  height: auto;
}

[data-type="list"] li p {
  padding: 0 1.5rem;
}

[data-type="list"] li p:first-of-type, [data-type="list"] li a {
  font-size: 1.9rem;
  line-height: 1.9rem;
  font-weight: 400;
  margin: 0;
  padding: 1rem 1.5rem 0;
  color: #333333;
}

[data-type="list"] li > a {
  height: 2rem;
  padding: 2rem 1.5rem;
}

[data-type="list"] li > a.menu-item:after {
  font-family: "gaia-icons";
  font-size: 25px;
  line-height: 6rem;
  color: #657073;
}
html[dir="ltr"] [data-type="list"] li > a.menu-item:after {
  content: "right-light";
}
html[dir="rtl"] [data-type="list"] li > a.menu-item:after {
  content: "left-light";
}

html[dir="ltr"] li > a.menu-item:after {
  left: auto; /* overrides lists.css */
  right: 1.5rem;
}
html[dir="rtl"] li > a.menu-item:after {
  left: 1.5rem;
  right: auto;
}

[data-type="list"] li > a.menu-item:active:after {
  /* the background specified in shared lists.css is semi-transparent
     so you'd see extra background on the icon if we don't disable it */
  background: none;
}

[data-type="list"] li > a.menu-item:active {
  background-color: #b2f2ff;
  color: #222;
}

#panel-ud-wordlist #ud-wordlist-noword {
  font-size: 1.9rem;
  font-weight: 400;
  margin: 4rem 2rem;
  color: #333333;

  display: none;
}

#panel-ud-wordlist.empty #ud-wordlist-noword {
  display: block;
}

#panel-ud-wordlist.empty section {
  display: none;
}

#ud-wordlist-list a {
  pointer-events: none;
}

#panel-ud-editword #ud-editword-add-header {
  display: none;
}

#panel-ud-editword.add-mode #ud-editword-add-header {
  display: block;
}

#panel-ud-editword.add-mode #ud-editword-edit-header {
  display: none;
}

#panel-ud-editword.add-mode #ud-editword-delete-btn {
  display: none;
}

#ud-editword-container {
  padding: 3rem 0;
}

#ud-editword-container div {
  padding: 0 1.5rem;
}

.installable-keyboard-item progress {
  width: calc(100% + 6rem);
  height: 0.4rem;
  background: rgba(0, 0, 0, 0.1);
  border: none;
  position: absolute;
  bottom: 0;
  left: -3rem;
}

html[dir="ltr"] .installable-keyboard-item progress::-moz-progress-bar {
  background: linear-gradient(135deg, #00CAF2 calc(100% - 0.4rem), transparent 0);
}
html[dir="rtl"] .installable-keyboard-item progress::-moz-progress-bar {
  background: linear-gradient(45deg, transparent 0.4rem, #00CAF2 0);
}

.installable-keyboard-item progress.hide {
  display: none;
}

.installable-keyboard-item button {
  display: block;

  border: none;
  background-color: transparent;
  background-size: 3rem 3rem;
  width: 5rem;
  height: 5rem;
  margin: 0.5rem 0;
  padding: 0;

  background-position: center center;
  background-repeat: no-repeat;
}

.installable-keyboard-item button.download {
  background-image: image-set(url("images/download.png") 1x, url("images/download@1.5x.png") 1.5x, url("images/download@2x.png") 2x, url("images/download@2.25x.png") 2.25x);
}

.installable-keyboard-item button.cancel-download {
  background-image: image-set(url("images/stop_download.png") 1x, url("images/stop_download@1.5x.png") 1.5x, url("images/stop_download@2x.png") 2x, url("images/stop_download@2.25x.png") 2.25x);
}

.installable-keyboard-item button.remove {
  background-image: image-set(url("images/icon_remove.png") 1x, url("images/icon_remove@1.5x.png") 1.5x, url("images/icon_remove@2x.png") 2x, url("images/icon_remove@2.25x.png") 2.25x);
}

.installable-keyboard-item[data-enabled-action="download"] button:not(.download),
.installable-keyboard-item[data-enabled-action="cancel-download"] button:not(.cancel-download),
.installable-keyboard-item[data-enabled-action="remove"] button:not(.remove),
.installable-keyboard-item[data-enabled-action="none"] button {
  display: none;
}