.component {
  width: 85vw;
  height: 100vh;
  border-right: var(
    --sidebar-border-right,
    1px solid var(--sidebar-border-color, transparent)
  );
  position: fixed;
  display: none;
  align-self: flex-start;
  flex-direction: column;
  top: 0;
  overflow: auto;
  background: var(--sidebar-background, #f5f5f4);
  left: 0;
  bottom: 0;
  z-index: 101;
  user-select: none;
  font-size: 1rem;
}

@media (min-width: 48rem) {
  .component {
    position: sticky;
    display: grid;
    grid-template-rows: max-content 1fr;
    padding-bottom: 1.5rem;
    width: 100%;
    max-width: 17.5rem;
    font-size: 0.875rem;
  }
}

@media print {
  .component {
    display: none;
  }
}

.isOpen {
  display: block;
}

.content {
  display: flex;
  flex-direction: column;
  padding-left: var(--sidebar-padding, 1.5rem);
  padding-right: var(--sidebar-padding, 1.5rem);
  gap: var(--gap, 1rem);
}

@media (min-width: 48rem) {
  .content {
    --gap: var(--gap-min, 1rem);
  }
}

.last {
  margin-top: auto;
}

.searchForm {
  margin: var(--sidebar-search-field-margin, 1rem 0);
}