:root {

}

.filter-drawer {
  width: var(--filter-drawer-width);
  height: 100vh;
  position: fixed;
  left: var(--sidebar-width);
  background-color: whitesmoke;
  top: 0;
  z-index: 0;
  border: 1px solid lightgrey;
  transform: translateX(-100%);
  transition: transform 300ms ease-in-out;
  background-color: var(--mio-theme-color-inverse-on-surface);
  background-color: var(--mio-theme-color-surface-1);
  background-color: var(--mio-theme-color-surface-2);
  background-color: var(--mio-theme-color-surface-3);
  background-color: var(--mio-theme-color-background);
  background-color: #f5f5f545;
}

.filter-drawer-content {
  padding: 48px;
  padding-top: 8px;
  padding-left: 24px;
  padding-right: 24px;
  overflow-y: auto;
  overflow-x: hidden;
}

.close-drawer-button:hover {
  background-color: whitesmoke;
}
.close-drawer-button:hover span {
  color: var(--s-primary) !important;
}
.filter-drawer-title {
  width: 300px;
  padding: 16px;
}

body.show-drawer .filter-drawer {
  transform: translateX(0%);
}

body.show-drawer .main-content {
  padding-left: calc(var(--filter-drawer-width) + var(--sidebar-width) + 8px);
}

body.show-drawer .library-topbar {
  width: calc(100% - var(--filter-drawer-width) - var(--sidebar-width) - 8px - 8px);
}