/*
 * The code is being shared between system/emergency-call/js/keypad.js
 * and dialer/js/keypad.js. Be sure to update both files when you commit!
 *
 * BiDi note: keypads are always displayed in LTR (hardware legacy).
 * This stylesheet must *NOT* be mirrored for RTL.
 */

.reset-button {
  border: 0;
  background: none;
}

.reset-button::-moz-focus-inner {
  border: 0;
  outline: none;
}

#phone-number-view-container {
  width: 100%;
  height: 28%;
  background: var(--header-background);
  text-align: center;
  display: flex;
  font-weight: 300;
  overflow: hidden;
}

#phone-number-view-container .phone-number-view-wrapper-input {
  width: 100%;
  margin-bottom: 4.5rem;
  display: flex;
  align-items: center;
  padding: 0 1rem 0 2rem;
}

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

#phone-number-view {
  font-size: 4.1rem;
  width: 100%;
  border: 0;
  margin: 0;
  background: transparent;
  color: var(--header-color);
  text-align: left;
  cursor: none;
  padding: 0;
  pointer-events: auto;
  -moz-user-select: text;
}

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

#keypad-delete {
  margin-bottom: 4.5rem;
  padding: 0 2.5rem 0 0;
  visibility: hidden;
  text-align: right;
}

#keypad-delete::before {
  content: "";
  background: url('keypad/images/keypad/actionicon_dialer_delete.png') no-repeat;
  width: 3rem;
  height: 2rem;
  display: inline-block;
  background-size: 100%;
}

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

#keyboard-container {
  height: 72%;
  padding: 0 1rem;
}

#keypad {
  width: 100%;
  height: 80%;
  display: table;
  table-layout: fixed;
}

.keypad-row {
  display: table-row;
}

.keypad-key {
  display: table-cell;
  padding: 1.3rem 0 0 2rem;
  box-sizing: border-box;
  height: 20%;
  vertical-align: middle;
  color: #333;
  font-weight: 300;
  font-size: 5rem;
  line-height: 1rem;
  overflow: hidden;
  text-align: left;
}

.keypad-key span {
  width: 1.5rem;
  display: inline-block;
  overflow: visible;
}

.keypad-key em {
  display: inline-block;
  font-weight: 300;
  font-size: 1.5rem;
  color: #038282;
  font-style: normal;
  width: 4.5rem;
  overflow: visible;
  text-align: left;
}

.keypad-key.active {
  background: #94eee9;
  color: #fff;
}

.keypad-key * {
  pointer-events: none;
}

#keypad-delete * {
  pointer-events: none;
}

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

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

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

  display: inline-block;
  width: 3rem;
  height: 2rem;
}

.voicemail {
  background-image: url('keypad/images/keypad/actionicon_dialer_voicemail.png');
  background-size: 3rem;
  background-position: -0.4rem -0.1rem;
}

.asterisk {
  width: 4rem;
  margin-top: 1rem;
  margin-left: 0.2rem;
  overflow: visible;
}

.sharp {
  font-size: 4.5rem;
  width: 4rem;
  line-height: 0;
  margin-top: -0.5rem;
  margin-left: 0.2rem;
  overflow: visible;
}

#keypad-callbar {
  height: 20%;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  border-bottom: 0;
  border-left: 0;
  box-sizing: border-box;
}

.keypad-callbar-button {
  position: relative;
  width: 9rem;
  background: #e7e7e7;
  background-size: auto 100%;
  border-radius: 2rem;
  overflow: hidden;
  height: 4rem;
  text-align: center;
}

.keypad-callbar-button.cancel {
  background: #575757;
  line-height: 4rem;
  font-size: 1.8rem;
  font-style: italic;
}

.keypad-callbar-button.cancel:active {
  background: #9ef2e7;
}

#keypad-callbar-call-action {
  display: flex;
  position: relative;
  flex-grow: 1;
  align-items: center;
  flex-direction: row-reverse;
  background-image: url("keypad/images/keypad/actionicon_activecall_pickup.png");
  background-color: #00adad;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 4rem 4rem;
  border-radius: 2rem;
  margin-inline-start: 1rem;
  height: 4rem;
}

#keypad-callbar-call-action:active {
  background-color: #94eee9;
}

.icon-add-contact::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("keypad/images/keypad/actionicon_activecall_addcontact_40x80.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 4rem 8rem;
}

/* we won't do anything on click but this prevents fluffing/rendering issues */
.icon-add-contact:disabled {
  pointer-events: all;
}

.icon-add-contact:disabled::before {
  opacity: 0.4;
}

.icon-add-contact:not(:disabled):active::before {
  background-position: center -4rem;
}

.js-sim-indication {
  display: none;
  font-size: 1.3rem;
  text-align: right;
  margin-right: 0.6rem;
  color: #fff;
}

.has-preferred-sim .js-sim-indication {
  display: initial;
}

.has-preferred-sim #keypad-callbar-call-action:after {
  content: "";
  position: absolute;
  width: 1.4rem;
  height: 1rem;
  bottom: 0;
  right: 1.7rem;
  background-image: url("/shared/elements/gaia_sim_picker/images/long-tap-indicator.png");
  background-repeat: no-repeat;
  background-size: 1.4rem 1rem;
}

#keypad-hidebar {
  border: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  height: 7.5rem;
}

.kh__button {
  width: 5rem;
  height: 5rem;
  background: #ded9d6;
  border: none;
  border-radius: 100%;
  margin-top: 1rem;
  position: relative;
}

.kh__button::before {
  content: "";

  position: absolute;
  top: .5rem;
  left: .5rem;
  width: 4rem;
  height: 4rem;

  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
}

.kh__button:active::before {
  background-position: 0 -4rem;
}

.kh__button:active {
  background-color: #9ef2e7;
}

.kh__button.active-state::before {
  background-position: 0 -8rem;
}

.kh__button--mute::before {
  background-image: url('keypad/images/keypad/actionicon_activecall_mute.png');
}

.kh__button--hide::before {
  background-image: url('keypad/images/keypad/actionicon_activecall_dismisskeyboard.png');
}

.kh__call-end-button {
  width: 6.5rem;
  height: 6.5rem;
  background: #e00;
  border: none;
  border-radius: 100%;
  position: relative;
}

.kh__call-end-button::before {
  content: "";

  position: absolute;
  top: 1.1rem;
  left: 1.2rem;
  width: 4rem;
  height: 4rem;

  background-image: url('keypad/images/actionicon_activecall_hangup.png');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
}

.kh__call-end-button:active::before {
  background-position: 1.2rem 6rem;
}

.phone-number-font {
  color: #fff;
}

.full-height {
  height: 100%;
}