/* Structure for toolbar*/

.icon-recents {
  background-image: url("images/recents.png");
}

.icon-contacts {
  background-image: url("images/contacts.png");
}

.icon-keypad {
  background-image: url("images/dialpad.png");
}

/* Making lazy loading look nice */
#contacts-view .bb-tabpanel,
#recents-view.hidden .bb-tabpanel {
  background-color: white;
}

#contacts-view .bb-tabpanel:before,
#recents-view.hidden .bb-tabpanel:before {
  position: absolute;
  left: 0;
  right: 0;
  height: 5rem;

  background-color: var(--header-background);
  content: "";
}

#iframe-contacts-container {
  overflow: hidden;
}

#iframe-contacts {
  position: absolute;
}

#recents-view.hidden .bb-tabpanel section {
  display: none;
}

.no-opacity {
  opacity: 0 !important;
}

/* For showing/hiding navbar */
#views:before {
  transform: translateX(0);
}

#views.hide-toolbar:before {
  transform: translateX(100%);
}

#views > li > .icon {
  z-index: 2;
}

#views.hide-toolbar > li {
  background: none;
  pointer-events: none;
}

#views.hide-toolbar > li:before,
#views.hide-toolbar > li > .icon {
  transform: translateY(100%);
  visibility: hidden;
}

#views.hide-toolbar #iframe-contacts-container {
  height: 100%;
}

#views .bb-tabpanel {
  pointer-events: all;
}

#contacts-view .bb-tabpanel {
  height: calc(100% - 4.5rem);
  z-index: 1;
}