/*
 * Basic and shared styles of the structure
 * */
html, body {
  font-size: 62.5%;
  width: 100%;
  height: 100%;
  margin: 0;
  color: #000;
  background: #f4f4f4;
}

html, body * {
  -moz-user-select: none;
}

input {
  -moz-user-select: text;
}

.vertical {
  width: 100%;
}

section[role="region"] {
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  z-index: 1;
}

body {
  background: url(bg_light.png);
}

h3 {
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 2.3rem;
  margin: 0 0 1rem;
  text-align: start;
}
h3:-moz-dir(rtl) {
  text-align: right;
}

label {
  width:100%;
  display:block;
}

ul {
  list-style: none;
  padding: 0;
}

/* * * * * * * * * * * * * * * * * * * * * * * *
 * Navigation bar based on a flex model
 * * * * * * * * * * * * * * * * * * * * * * * */

.navigation {
  position: absolute;
  background: #f4f4f4;
  border-top: 0.1rem solid #a6a6a6;
  padding: .75rem 1.5rem;
  box-sizing: border-box;
  margin: 0;
  left: 0;
  right:0;
  bottom: 0;
  overflow: hidden;
  display: block;
}

/* Overwrite this property from Building Blocks */
html[dir="ltr"] .navigation button { margin-left: 0.5rem; }
html[dir="rtl"] .navigation button { margin-right: 0.5rem; }

html[dir="ltr"] .navigation button.start { margin-left: 0.5rem; }
html[dir="rtl"] .navigation button.start { margin-right: 0.5rem; }

.navigation button.start,
.navigation button.end {
  width: calc((100% / 2) - 0.5rem);
  position: relative;
}
html[dir="ltr"] .navigation button.start,
html[dir="ltr"] .navigation button.end { float: left; }
html[dir="rtl"] .navigation button.start,
html[dir="rtl"] .navigation button.end { float: right; }

/* When there is only one option, we remove the margin */

.navigation-single-button button.start {
  display: none;
}

.navigation.navigation-single-button button.end {
  margin: 0;
  width: 100%
}

.navigation-back-only button {
  margin: 0;
}

.navigation-back-only button.end {
  display: none;
}

.navigation-done #fxa-module-back,
.navigation-done #fxa-module-next {
  display: none;
}

#fxa-module-done {
  display: none;
}

.navigation-done #fxa-module-done {
  display: block;
}

/* * * * * * * * * * * * * * * * * * * * * * * *
 * Steps & Container
 *   All steps are contained in several views inside
 * 'step-container'. We will use HTML 'import' polyfill
 * and lazy load of the views. A view is a set of steps.
 * * * * * * * * * * * * * * * * * * * * * * * */

.bb-steps {
  margin: 0.5rem 1.5rem;
}

#step-container {
  height: calc(100% - 6.3rem - 5rem);
  position: relative;
  overflow: hidden;
}

.ff_account,
.screen {
  font-family: sans-serif;
  font-size: 1.7rem;
  line-height:2.3rem;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: scroll;
  display: none;
  padding: 1.5rem 2.5rem;
  box-sizing: border-box;
  text-align: center;
}

.screen p.fxa-intro {
  text-align: start;
  line-height: 2.3rem;
  font-size: 1.7rem;
}
.screen p {
  text-align: start;
  line-height: 1.9rem;
  font-size: 1.5rem;
  margin: 0 0 1rem;
}

.current {
  display: block;
}

/*
 * Intro screen styles
 */

#fxa-hello-user {
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

#fxa-user-email,
#fxa-user-set-email {
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}

p.fine-print {
  font-size: 1.2rem;
  line-height: 1.6rem;
}

/*
* Verification Screen Styles
*/

ul.fxa-verification-wrapper {
  margin: 0;
  padding: 0;
}

ul.fxa-verification-wrapper li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * Password screen styles
 */

#show-pw-wrapper {
  width: 100%;
  display: block;
  margin: 0 -1.5rem;
}

#show-pw-wrapper p {
  display: block;
  margin: 1.5rem 0;
}
html[dir="ltr"] #show-pw-wrapper p { float: left; }
html[dir="rtl"] #show-pw-wrapper p { float: right; }

html[dir="ltr"] #show-pw-wrapper > label { float: left; }
html[dir="rtl"] #show-pw-wrapper > label { float: right; }

/* Animate next screen */
.currentToPrev {
  display:block;
}
html[dir="ltr"] .currentToPrev {
  animation: currentToLeft var(--transition-duration) forwards;
}
html[dir="rtl"] .currentToPrev {
  animation: currentToRight var(--transition-duration) forwards;
}

.nextToCurrent {
  display:block;
}
html[dir="ltr"] .nextToCurrent {
  animation: rightToCurrent var(--transition-duration) forwards;
}
html[dir="rtl"] .nextToCurrent {
  animation: leftToCurrent var(--transition-duration) forwards;
}

/* Animate prev screen */
.prevToCurrent {
  display: block;
}
html[dir="ltr"] .prevToCurrent {
  animation: leftToCurrent var(--transition-duration) forwards;
}
html[dir="rtl"] .prevToCurrent {
  animation: rightToCurrent var(--transition-duration) forwards;
}

.currentToNext {
  display: block;
}
html[dir="ltr"] .currentToNext {
  animation: currentToRight var(--transition-duration) forwards;
}
html[dir="rtl"] .currentToNext {
  animation: currentToLeft var(--transition-duration) forwards;
}

@keyframes currentToLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@keyframes rightToCurrent {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}
@keyframes leftToCurrent {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}
@keyframes currentToRight {
  0% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

.current {
  display: block;
}

.screen a {
  text-decoration: underline;
  color: #000;
}

.fxa-logo {
  background-image: url('fxa_logo.png');
  background-size: 14rem auto;
  background-repeat: no-repeat;
  margin: 0 auto;
  width: 14rem;
  height: 15rem;
}

p.fxa-envelope {
  background-image: url('fxa_envelope.png');
  background-repeat: no-repeat;
  background-size: 7rem;
  padding-inline-start: 8rem;
  padding-top: 1rem;
  line-height: 2rem;
  min-height: 6.4rem;
  max-width:100%;
  overflow: hidden; /* short email addresses will only take up one line*/
  text-overflow: ellipsis;
}
html[dir="ltr"] p.fxa-envelope { background-position: left top; }
html[dir="rtl"] p.fxa-envelope { background-position: right top; }

#fxa-error-overlay {
  z-index: 10;
}

/* * * * * * * * * * * * * * * * * * * * * * * *
 * Overlay:
 *   IMPORTANT: Avoid to use 'visibility' or 'opacity' due
 * to performance issues. For hiding, use 'display:none;''
 * * * * * * * * * * * * * * * * * * * * * * * */

#fxa-overlay {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  font-size: 2rem;
  background-color: rgba(200,200,200,0.9);
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#fxa-overlay.show {
  display: flex;
}

form[role=dialog] {
  display: none;
}

form[role=dialog].show {
  display: block;
}

/*
 * Classes to ensure functionality
 */

a.disabled {
  opacity: 0.3;
  pointer-events: none;
  text-decoration: none;
}

.button.icon-dialog select {
  border: none;
  background: transparent;
  font-size: 1.7rem;
}