/**
 * NOTICE: This file should be kept in sync with
 * callscreen/style/lockscreen.css
 **/

/**
 * BiDi note: because this stylesheet is 'scoped', instead of:
 *     html[dir="rtl"] #volume { ... }
 * we must use:
 *     #volume:-moz-dir(rtl) { ... }
 */

#lockscreen {
  --panel-transition-secs: var(--transition-duration);
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  visibility: visible;
  -moz-user-select: none;
}

#screen.active-statusbar > #lockscreen {
  top: 4rem;
  height: calc(100% - 4rem);
}

#lockscreen.unlocked {
  pointer-events: none;
  visibility: hidden;
}

/**
 * Because of performance issue, we need to use an individual
 * background element instead of setting the background inside the container.
 *
 * This would be a step toward removing the overhead while a large container
 * contains children and do the opacity animation, which would cost lot on
 * temporary surfaces.
 **/
#lockscreen-background, #lockscreen-masked-background {
  position: absolute;
  top: 0;
  overflow: hidden;

  /* Must match the CSS background rule of #screen in system.css */
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;

  -moz-user-select: none;
  opacity: 1;
  z-index: 1;
}

#lockscreen-background {
  background-color: #000;
  background-size: cover; /* Possible memory over-consumption with huge images, it should be removed for improving stability*/
  background-position: 50% 50%;
}

#lockscreen-masked-background {
  background-size: 100% 100%;
  transition: background-image var(--transition-duration) ease,
              background-color var(--transition-duration) ease;
}

#lockscreen-masked-background.blank {
  background: rgba(0,0,0,0.1);
}

#screen.lockscreen-camera > #lockscreen-camera {
  visibility: visible;
}

/* When switching lock-camera off,
 * transition time should be delayed to prevent homescreen appears.
 * (Let lockscreen appears first)
 */
#screen:not(.lockscreen-camera) > #lockscreen-camera {
  transition-delay: var(--transition-duration);
}

#lockscreen-camera {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  visibility: hidden;
}

#lockscreen-camera > iframe {
  width: 100%;
  height: 100%;
  border: none;
}

#lockscreen.no-transition {
  transition: none;
}

#lockscreen-container {
  width: 100%;
  height: 100%;
  z-index: 0;
}

#lockscreen .lockscreen-panel {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  visibility: hidden;
  transition: visibility var(--panel-transition-secs) ease, transform var(--panel-transition-secs) ease;
}

.lockscreen-background::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/**
 * Because of the individual background element, the slide would appear
 * after the passcode pad got invoked, so we need to hide it here.
 */
[data-panel="passcode"] #notifications-lockscreen-container,
[data-panel="passcode"] #lockscreen-notification-arrow,
[data-panel="passcode"] #lockscreen-media-container,
[data-panel="passcode"] #lockscreen-icon-container {
  visibility: hidden;
}

[data-panel="main"] #lockscreen-panel-main,
[data-panel="passcode"] #lockscreen-panel-main,
[data-panel="emergency-call"] #lockscreen-panel-emergency-call {
  visibility: inherit;
}

[data-panel="main"] #lockscreen-alt-camera {
  visibility: hidden;
  position: absolute;
}

[data-panel="passcode"] #lockscreen-alt-camera.lockscreen-icon {
  opacity: 1.0;
}

#lockscreen-header {
  z-index: 9999;
  position: absolute;
  top: 3rem;   /* 3rem = height of status bar */
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 1.5rem 2.4rem 0;
  color: #fff;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 1;
}

[data-panel="main"] #lockscreen-header {
  transform: translateY(0);
}

[data-panel="camera"] #lockscreen-header,
[data-panel="emergency-call"] #lockscreen-header {
  transform: translateY(0);
  transition: none;
}

#lockscreen-conn-states {
  width: 100%;
  display: inline-block;
  font-weight: 300;
  font-size: 1.4rem;
  padding-bottom: 1.4rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#lockscreen-conn-states span:empty {
  display: none;
}

#lockscreen-conn-states span:first-child {
  display: inline-block;
  margin-inline-end: 0.8rem;
}

#lockscreen-conn-states span:last-child {
  display: block;
}

/* For some reason display: inline-block disregards hidden attribute */
#lockscreen-conn-states span[hidden],
#lockscreen-conn-states[hidden] {
  display: none;
}

#lockscreen-clock-time {
  line-height: 0.9;
  margin: -1.4rem 0 0;
  margin-inline-start: -0.4rem;
  font-weight: 200;
  font-size: 8.5rem;
}

#lockscreen-date {
  display: inline-block;
}
#lockscreen-date, #lockscreen-alarm {
  font-weight: 300;
  font-size: 1.4rem;
}

#lockscreen-alarm::after {
  content: ' ';
  top: 3px;
  background-image: url('./images/alarm_icon.png');
  background-repeat: no-repeat;
  background-size: 1.5rem;
  width: 15px;
  display: inline-block;
  height: 15px;
  position: relative;
}

.has-alarm {
  display: inline-block;
}
.no-alarms {
  display: none;
}

#lockscreen-clock-time, #lockscreen-date, #lockscreen-alarm {
  color: #fff;
}

#lockscreen-charging {
  font-weight: 300;
  font-size: 1.2rem;
  color: white;
}

#lockscreen-area {
  position: absolute;
  height: 8.6rem;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
}

#lockscreen .lockscreen-icon-area {
  height: 10rem;
  position: absolute;
  border-style: none;
  transition: opacity var(--panel-transition-secs) ease;
}

#lockscreen .lockscreen-icon {
  width: 6rem;
  height: 6rem;
  pointer-events: none;
}

#lockscreen-area-slide {
  text-align: center;
  width: 100%;
}

#lockscreen .touched .lockscreen-icon {
  transition: none;
}

#lockscreen .lockscreen-icon-right {
  right: calc(50% - 14rem);
}

#lockscreen .lockscreen-icon-left {
  left: calc(50% - 14rem);
}

@media (min-width:768px) {
  #lockscreen .lockscreen-icon-right {
    right: calc(50% - 20.5rem);
  }

  #lockscreen .lockscreen-icon-left {
    left: calc(50% - 20.5rem);
  }

  #lockscreen-header {
    padding-inline-start: 6rem;
    font-weight: 300;
  }

  #lockscreen-date {
    padding-top: 0.5rem;
    font-size: 2.4rem;
  }
}

button::-moz-focus-inner {
  border: 0;
}

:-moz-any(.touched, #screen:not(.locked), #screen.attention, #lockscreen:not([data-panel="main"]))
:-moz-any(#lockscreen-left-arrow, #lockscreen-right-arrow) {
  display: none;
  animation: none;
}

#lockscreen-area-unlock > div {
  background-image: url('./images/lockscreen_unlock.png');
  background-position: 1.1rem center;
  background-repeat: no-repeat;
  background-size: 3rem;
  margin-top: 1.9rem;
}

#lockscreen .lockscreen-icon-left, .lockscreen-icon-right {
  z-index: 16;
  pointer-events: auto;
}

/* Compensation for the effects after enabling the pointer-event attribute. */
#lockscreen .lockscreen-icon-left:active, .lockscreen-icon-right:active {
  background: none;
}

#lockscreen-area-camera > div {
  background-image: url('./images/lockscreen_camera.png');
  background-position: 1.85rem center;
  background-repeat: no-repeat;
  background-size: 3rem;
  margin-top: 2rem;
}

#lockscreen-alt-camera.lockscreen-icon {
  border-radius: 2.5rem;
  background-color: rgba(255, 255, 255, 0.25);
  box-sizing: border-box;
  pointer-events: auto;
  opacity: 0.1;
  transition: opacity var(--panel-transition-secs) ease;
  width: 5rem;
  height: 5rem;
  margin-top: 5rem;
}
#lockscreen-alt-camera.lockscreen-icon:-moz-dir(ltr) { float: right; }
#lockscreen-alt-camera.lockscreen-icon:-moz-dir(rtl) { float: left; }

#lockscreen-alt-camera-button {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: auto;
  background-image: url('./images/pin_camera.png');
  background-position: 1rem center;
  background-repeat: no-repeat;
  background-size: 3rem;
}

#lockscreen-panel-emergency-call {
  /* > camera, unlock icons > canvas */
  z-index: 32;
}

#lockscreen-panel-emergency-call {
  transform: translateX(100%);
}

#lockscreen-panel-emergency-call::before {
  content: none;
}

#lockscreen-panel-emergency-call > iframe {
  width: 100%;
  height: 100%;
  border: none;
}

[data-panel="emergency-call"] #lockscreen-panel-emergency-call {
  transform: translateX(0);
}

#lockscreen-area-handle {
  position: absolute;
  background-image: url('./images/handle.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 2rem;
  border-top: 0.1rem solid transparent;
  top: -2rem;
  height: 0.9rem;
  width: 100%;
  transition:
    transform var(--panel-transition-secs) ease,
    opacity var(--panel-transition-secs) ease;
}

#lockscreen-icon-container {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 10rem;
  pointer-events: none;
  z-index: 5;
}

#lockscreen .touched #lockscreen-icon-container {
  transition: none;
}

#lockscreen .touched .lockscreen-icon-area {
  transition: none;
}

#lockscreen-canvas-wrapper {
  position: absolute;
  bottom: 0.75rem;
  z-index: 8;
  width: 100%;
}

#lockscreen-message {
  position: relative;
  top: 18rem;
  offset-inline-start: 0;
  word-wrap: break-word;
  text-align: center;
  overflow-y: auto;
  line-height: 1.4rem;
  z-index: 16;
  margin: auto;
  border-radius: 1rem;
  border: 1px solid #e6e6e6;
  padding: 5px;
  width: 27rem;
  min-height: 5rem;
  max-height: 10rem;
  background-color: #fafafa;
  font-size: 1.4rem;
  font-weight: 700;
  color: black;
}