/* Fullscreen Button */
#admin-hero-modal .admin-hero-fullscreen-toggle {
  position: absolute;
  right: 25px;
  top: 6px;
  cursor: pointer;
  padding: 5px;
  /*z-index: 100010;*/
  pointer-events: auto;
  height: 25px;
  width: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#admin-hero-modal .admin-hero-fullscreen-toggle i {
  font-size: 15px;
  color: #aaaaaa;
}

#admin-hero-modal .admin-hero-fullscreen-toggle:hover i {
  color: #56ff00;
}

/* make the modal fill the true viewport height */
#admin-hero-modal.admin-hero-fullscreen {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: calc(var(--vh) * 100) !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
}

/* ensure body/content scrolls, not the entire modal */
#admin-hero-modal.admin-hero-fullscreen .admin-hero-settings-overlay,
#admin-hero-modal.admin-hero-fullscreen .admin-hero-info-overlay,
#admin-hero-modal.admin-hero-fullscreen #admin-hero-editor {
  flex-grow: 1;
  overflow-y: auto;
}

/* swap the expand/compress icons */
#admin-hero-modal.admin-hero-fullscreen
  .admin-hero-fullscreen-toggle
  i.fa-expand {
  display: none;
}
#admin-hero-modal.admin-hero-fullscreen
  .admin-hero-fullscreen-toggle
  i.fa-compress {
  display: inline-block;
}
#admin-hero-modal .admin-hero-fullscreen-toggle i.fa-compress {
  display: none;
}
#admin-hero-modal .admin-hero-fullscreen-toggle i.fa-expand {
  display: inline-block;
}