@import "https://unpkg.com/open-props";

.sidebarHamburger {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  border: none;
}

#sidebar {
  display: block;
  z-index: var(--layer-important);
  inset: 0;
  overflow: hidden;
  height: 100%;
  width: 75%;
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  margin: 0;
  border: none;
  padding: 0;
  padding-bottom: 38px;
  transition: opacity .5s;
  /*transition: display 1s allow-discrete, overlay 1s allow-discrete;
   animation: sidebarClose 0.5s forwards;
  &[sidebarOpen] {
    animation: sidebarOpen 0.5s forwards;
  } */
  animation: var(--animation-scale-down) forwards;
  animation-timing-function: var(--ease-squish-3);
}

#sidebar[open] {
    animation: sidebarOpen forwards;
}

#sidebar:not([open]) {
    pointer-events: none;
    opacity: 0;
}

#sidebar::backdrop {
  backdrop-filter: blur(0.25rem);
}

.sidebarInner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: end;
  flex-direction: column;
  box-sizing: border-box;

}

.headerEmulator {
  height: 85px;
  width: 100%;
  padding-left: 9px;
  padding-right: 27px;
  display: flex;
  justify-content: right;
  align-items: center;
  /* width: 50%; */
}

.sidebarItems {
  padding-right: 30px;
  text-align: right;
  font-weight: 200;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: 18px;
}

.sidebarItems a {
  color: rgb(24, 24, 24);
  display: flex;
  justify-content: right;
}

.sidebarItems h4 {
  color: rgba(68, 68, 68, 0.801);
}

.sidebarItems img {
  margin-left: 5px;
}