@use '../../styles/tools';

.sidebar-drawer {
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  pointer-events: auto;
  will-change: var(--navigation-drawer-will-change);
  position: absolute;
}

.sidebar-drawer--top {
  top: 0;
}

.sidebar-drawer--bottom {
  left: 0;
}

.sidebar-drawer--left {
  top: 0;
  left: 0;
  right: auto;
}

.sidebar-drawer--right {
  top: 0;
  left: auto;
  right: 0;
}

.sidebar-drawer--floating {
  border: none;
}

.sidebar-drawer--temporary {
  box-shadow: var(--navigation-drawer-temporary-elevation);
}

.sidebar-drawer--sticky {
  height: auto;
}

.sidebar-drawer__content {
  max-width: 100%;
  overflow-x: var(--navigation-drawer-content-overflow-x);
  overflow-y: var(--navigation-drawer-content-overflow-y);
}

.sidebar-drawer__scrim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.699999988079071;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

.fade-leave, .fade-enter-from {
  opacity: 0;
}