/* BACKDROP */
.sidebar-backdrop {
  position: fixed;
  inset: 0;

  background-color: rgba(0, 0, 0, 0.5);

  /*
   --blur: 5px;
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  */
  z-index: 1000;

  touch-action: none;
}

.sidebar-backdrop:not(.show) {
  display: none;
}

.sidebar-backdrop.show {
  display: block;
}

/* RESETS */
.sidebar,
.sidebar * {
  box-sizing: border-box;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  margin: 0;
  padding: 0;
}

.sidebar a {
  text-decoration: none;
  color: inherit;
}

.sidebar details summary::-webkit-details-marker {
  display: none;
}

.sidebar details summary {
  list-style: none;
  list-style-type: none;

  user-select: none;
}

.sidebar-body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.sidebar-body {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* SIDEBAR */

.sidebar {
  position: fixed;
  inset: 0;
  left: unset;
  z-index: 1001;

  max-width: 500px;
  width: 100%;
  min-width: 200px;

  max-height: 100%;

  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header" "content";

  background-color: #e5e2dc;
  color: black;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

  transition-property: transform;
  transition-duration: 0.2s;

  padding: 24px;
  padding-bottom: 0;
}

.sidebar:not(.show) {
  transform: translateX(100%);
}

.sidebar.show {
  transform: translateX(0);
}

.sidebar .sidebar-header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar .sidebar-body {
  grid-area: content;
  height: 100%;
  overflow-y: auto;

  padding-bottom: 48px;
}

.sidebar .level-1 {
  margin-top: 20px;
}

.sidebar .level-1 > summary {
  font-size: 1.1em;
  border-bottom: 1px solid black;
}

.sidebar .level-2 {
  margin-top: 10px;
}

.sidebar .level-2-label {
  text-transform: uppercase;
}

.sidebar .level-3 {
  margin-top: 10px;
}

.sidebar .level-3 {
  padding-left: 20px;
}

.sidebar .level-3-label.no-children {
  color: #00000077;
}

.sidebar .level-4 {
  margin-top: 10px;
  margin-left: 20px;
}

body.block-scrolling {
  overflow: hidden;
}



/* LANGUAGE SWITCH */
.sidebar .language-switch {
  margin: 0;
  margin-top: 16px;
}

.sidebar .language-switch * {
  color: inherit;
}

.sidebar .language-switch ul {
  padding: 0;
}

.sidebar .language-switch li {
  margin: 0;
}

.sidebar .language-switch ul li {
  text-transform: uppercase;
  display: inline
}

.sidebar .language-switch ul li.active a {
 font-weight:bold;
 cursor:default;
}

.sidebar .language-switch ul li:after {
  content: "|";
  padding-inline: 8px;
}

.sidebar .language-switch ul li:last-child:after {
  content: ""
}

.sidebar summary {
  display: flex;
  align-items: center;
  justify-content: space-between;

  cursor: pointer;
}

.sidebar .spin-when-details-collapsed {
  transform: rotate(-90deg);
  transition: transform 0.1s;
}
.sidebar details[open] > summary > .spin-when-details-collapsed {
  transform: rotate(0deg);
}