/**
 * BiDi note: as a passcode is a number, it should *NOT* be mirrored in RTL.
 */

#screenLock li.lockscreen-enabled,
#screenLock li.passcode-enabled {
  display: none;
}

#screenLock[data-lockscreen-enabled="true"] li.lockscreen-enabled,
#screenLock[data-lockscreen-enabled="true"][data-passcode-enabled="true"] li.passcode-enabled {
  display: block;
}

#screenLock-passcode .passcode-error {
  clear: both;
  display: none;
  height: 4.2rem;
  padding-inline-start: 3rem;
  color: red;
  font-size: 1.5rem;
  line-height: 4.2rem;
}

#screenLock-passcode[data-passcode-status="error"][data-mode="confirm"] div.passcode-error[data-type="incorrect"],
#screenLock-passcode[data-passcode-status="error"][data-mode="confirmLock"] div.passcode-error[data-type="incorrect"],
#screenLock-passcode[data-passcode-status="error"][data-mode="edit"] div.passcode-error[data-type="incorrect"] {
  display: block;
}

#screenLock-passcode[data-passcode-status="error"][data-mode="new"] div.passcode-error[data-type="mismatch"],
#screenLock-passcode[data-passcode-status="error"][data-mode="create"] div.passcode-error[data-type="mismatch"] {
  display: block;
}

#screenLock-passcode[data-passcode-status="error"] menu[data-mode="new"] {
  display: none;
}

#screenLock-passcode label {
  box-sizing: border-box;
  display: block;
  width: auto;
  height: auto;
  margin: 1.6rem 0 0.4rem;
  padding: 0 2rem;
  color: #000;
  font-size: 1.8rem;
}

/**
 * 1. Important required to override styles
 *    inside <gaia-header> <style scoped>
 *    Once we have ::content selector we
 *    can drop the <style scoped> and this
 *    !important won't be needed anymore.
 */

#screenLock-passcode [data-mode] {
  display: none !important; /* 1 */
}

#screenLock-passcode menu[type="toolbar"] {
  width: 9rem;
}

#screenLock-passcode menu[type="toolbar"] button {
  width: 100%;
}

/**
 * 1. Important required to override styles
 *    inside <gaia-header> <style scoped>
 *    Once we have ::content selector we
 *    can drop the <style scoped> and this
 *    !important won't be needed anymore.
 */

#screenLock-passcode[data-mode="create"]  [data-mode*="create"],
#screenLock-passcode[data-mode="confirm"] [data-mode*="confirm"],
#screenLock-passcode[data-mode="confirmLock"] [data-mode*="confirmLock"],
#screenLock-passcode[data-mode="edit"]    [data-mode*="edit"],
#screenLock-passcode[data-mode="new"]     [data-mode*="new"] {
  display: block !important; /* 1 */
}

#passcode-confirm {
  display: none;
}

#screenLock-passcode[data-status="success"] #passcode-confirm {
  display: inherit;
}

.passcode-input {
  z-index: -1;
  position: absolute;
  top: -5rem;
  left: 0; /* BiDi-proof: passcodes are not mirrored in RTL */
}

.passcode-container {
  position: absolute;
  z-index: 1;
  width: 100%;
  top: 0;
  left: 0;
  background: url(images/document-bg.png);
}

.passcode {
  width: calc(100% - 2rem);
  margin: 0 auto;
  overflow: hidden;
}

.passcode-digit {
  box-sizing: border-box;
  position: relative;
  float: left; /* BiDi-proof: passcodes are not mirrored in RTL */
  width: calc(25% - 1rem);
  height: 4rem;
  margin: 0 0.5rem;
  border: 0.1rem solid #c2c2c2;
  text-align: center;
  background-color: #fff;
  border-radius: 0.3rem;
}

span.passcode-digit[data-dot]::before {
  content: '';
  display: block;
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #3e3b39;
  border-radius: 0.75rem;
  top: 50%;
  left: 50%;             /* BiDi-proof: passcodes are not mirrored in RTL */
  margin-left: -0.75rem; /* BiDi-proof: passcodes are not mirrored in RTL */
  margin-top: -0.75rem;
}