lmnhq-panel {
  flex-wrap: wrap;
  justify-content: space-evenly;
  background-color: var(--color-bg-lmnhq-panel);
  align-content: flex-start;
  position: relative;
  max-width: 100%;
  display: none;
}

lmnhq-panel > * {
  position: relative;
}

lmnhq-panel[active="true"] {
  display: flex !important;
}

lmnhq-panel:before {
  content: "";
  top: 0;
  left: 0;
  width: calc(100% - (var(--padding-panel) * 4));
  height: calc(100% - (var(--padding-panel) * 8));
  margin: calc(var(--padding-panel) * 4) calc(var(--padding-panel) * 2);
  background-size: 10rem;
  background-position: bottom right;
  background-repeat: no-repeat;
  opacity: 0.1;
  position: absolute;
}

button[name="Back"],
[data-action="prev-panel"] {
  background-color: var(--color-cancel-hover);
  border-color: var(--color-cancel-hover);
}

@media screen and (min-width: 48rem) {
  /* why do we need this extra 1px? It works without it on Firefox but not Chrome? */
  .collapsed nav ~ lmnhq-panel {
    max-width: calc(100% - var(--width-nav-collapsed) + 1px);
  }

  nav ~ lmnhq-panel {
    max-width: calc(100% - var(--width-nav));
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
  }

  lmnhq-panel:before {
    background-size: 20rem;
  }
}