/*
 *  The code is being shared between system/emergency-call/js/keypad.js
 *  and dialer/js/keypad.js. Be sure to update both file when you commit!
 *
 */

.keypad-text {
  font-size: -moz-calc(6*0.226rem);
  color: #96AAB4;
}

#keyboard-view {
  width: 100%;
  height: 100%;
}

#fake-phone-number-view {
  position: absolute;
  line-height: 0;
  visibility: hidden;
}

#phone-number-view-container {
  width: 100%;
  height: -moz-calc(100% - 34.5rem);
  background: #242B36;
  text-align: center;
  display: table;
  table-layout: fixed;
  border-spacing: 1.5rem 0rem;
  font-family: 'MozTT';
  font-weight: 300;
}

#phone-number-view-container.keypad-visible {
  height: -moz-calc(100% - 35rem);
  visibility: hidden;
}

#phone-number-view {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: none;
  -moz-user-select: none;
}

#keypad-delete {
  text-align: center;
  width: 4rem;
  visibility: hidden;
}

#keypad-delete:active {
  opacity: 0.7;
}

#keypad-delete > div {
  width: 3.8rem;
  height: 2.8rem;
  background: url('images/dialer_icon_delete.png') ;
  background-size: 3.8rem 2.8rem;
  background-repeat: no-repeat;
}

#keyboard-container {
  width: 100%;
  height: 34.5rem;
}

#keypad {
  background: -moz-linear-gradient(top, #191E25 0%, #080B0D 100%);
  height: -moz-calc(100% - 10rem);
  width: 100%;
  display: table;
  table-layout: fixed;
}

.keypad-cell {
  display: table-cell;
  border-right: 1px solid #6F6F6F;
  border-top: 1px solid #6F6F6F;;
}

.keypad-cell:last-child {
  border-right: 0;
}

.keypad-key {
  border: 0;
  border-bottom: 1px solid #6F6F6F;
  height: 7rem;
  vertical-align: middle;
  position: relative;
}

.keypad-key:active {
  background: black;
  opacity: 0.7;
}

.keypad-key-label-container {
  width: 100%;
  height: 100%;
  display: table;
}

.keypad-key-label {
  display: table-cell;
  padding-left: 1.5rem;
  vertical-align: middle;
}

.keypad-key-label *,
#keypad-delete * {
  pointer-events: none;
}

.keypad-key-label-centered {
  padding-left: 0;
  text-align: center;
}

.font-size-plus {
  font-size: 2rem;
}

.keypad-subicon {
  background-repeat: no-repeat;
  background-position: center bottom;

  -moz-user-select: none;
  pointer-events: none;

  position: absolute;
  left: 3.75rem;
  bottom: 0.75rem;

  width: 3rem;
  height: 3rem;
}

.voicemail {
  background-image: url('images/voicemail.png');
}

.asterisk {
  background-image: url('images/asterisk.png');
  background-repeat: no-repeat;
  height: 3rem;
  width: 3rem;
  background-size: 3rem 3rem;
  background-position: center;
  margin: auto;
  pointer-events: none;
}

.sharp {
  background-image: url('images/sharp.png');
  background-repeat: no-repeat;
  height: 3rem;
  width: 3rem;
  background-size: 3rem 3rem;
  background-position: center;
  margin: auto;
  pointer-events: none;
}

#keypad-callbar {
  background: black;
  height: 6.5rem;
  width: 100%;
  display: table;
  table-layout: fixed;
  border-spacing: 1rem 1rem;
}

#keypad-callbar-add-contact,
#keypad-callbar-cancel {
  display: table-cell;
  width: 9rem;
  background: -moz-linear-gradient(top, #242b36 0%, #19191a 100%);
  border: .1rem solid #242B36;
  border-radius: .2rem;
  vertical-align: middle;
}

#keypad-callbar-cancel {
  width: 10rem;
}

#keypad-callbar-cancel:active {
  opacity: 0.7;
}

#keypad-callbar-cancel > div {
  text-align: center;
  font: 2rem 'MozTT';
}

#keypad-callbar-call-action {
  display: table-cell;
  width: 100%;
  background: #84c82c;
  border: 0;
  border-radius: .2rem;
  background: -moz-linear-gradient(top, #84c82c 0%, #5f9b0a 100%);
  vertical-align: middle;
}

#keypad-callbar-call-action:active {
  opacity: 0.7;
}

.icon-add-contact {
  margin: auto;
  width: 4rem;
  height: 4rem;
  background-image: url("images/ActionIcon_40x40_addcontact.png");
  background-repeat: no-repeat;
  background-size: 4rem 4rem;
  background-position: center;
}

#keypad-callbar-call-action > div {
  margin: auto;
  width: 4rem;
  height: 4rem;
  background-image: url("images/ActionIcon_40x40_pickup.png");
  background-repeat: no-repeat;
  background-size: 4rem 4rem;
  background-position: center;
}

#keypad-hidebar {
  background: rgba(0,0,0,.8);
  opacity: 1.0;
}

#keypad-hidebar-hang-up-action-wrapper {
  float: left;
  height: 6.5rem;
  width: 50%;
}

#keypad-hidebar-hide-keypad-action-wrapper {
  height: 6.5rem;
  width: 50%;
}

.keypad-hidebar-button {
  height: 4rem;
  border: 0;
  border-radius:.3rem;
  display: block;
}

#keypad-hidebar-hang-up-action {
  background: -moz-linear-gradient(top, #ff0000 0%, #ce0000 100%);
  opacity: 1.0;
  margin: 1rem .5rem 1.5rem 1.5rem;
}

#keypad-hidebar-hang-up-action > div {
  margin: 0 auto;
  background-image: url('images/ActionIcon_40x40_hangup.png');
  background-repeat: no-repeat;
  background-size: 4rem 4rem;
  background-position: center;
  width: 4rem;
  height: 4rem;
}

#keypad-hidebar-hide-keypad-action {
  background: -moz-linear-gradient(top, #6A6A6A 0%, #3E3E3E 100%);
  opacity: 1.0;
  margin: 1rem 1.5rem 1.5rem .5rem;
}

#keypad-hidebar-hide-keypad-action > div {
  margin: -moz-calc((4rem - 3rem)/2) auto;
  background-image: url('images/ActionIcons_30x30_dismiss_keyboard.png');
  background-repeat: no-repeat;
  background-size: 3rem 3rem;
  background-position: center;
  width: 3rem;
  height: 3rem;
}

.phone-number-font {
  font-size:-moz-calc(18*0.226rem);
  color: white;
  font-family:'MozTT';
}

.keypad-number {
  font-size: -moz-calc(25*0.226rem);
  color: white;
}