.ve-drawer {
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  background: rgb(var(--ve-theme-surface));
  color: rgb(var(--ve-theme-on-surface));
  height: 100%;
  max-width: 100%;
  pointer-events: auto;
  transition-duration: 0.2s;
  transition-property: box-shadow, transform, visibility, width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  border-color: rgba(var(--ve-border-color), var(--ve-border-opacity));
  border-style: solid;
  border-width: 0px;
}
.ve-drawer--border {
  border-width: thin;
}
.ve-drawer--border-default {
  border-color: rgba(var(--ve-border-color), var(--ve-border-opacity));
  border-style: solid;
  border-width: 0;
}
.ve-drawer--border-existence {
  border-width: thin;
}
.ve-drawer--beautify-scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: transparent;
}
.ve-drawer--beautify-scrollbar::-webkit-scrollbar-thumb {
  display: none;
  background: rgba(var(--ve-theme-on-surface), var(--ve-hover-opacity)) content-box;
  border: 2px solid transparent;
  border-radius: 5px;
}
.ve-drawer--beautify-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--ve-theme-on-surface), var(--ve-activated-opacity)) content-box;
}
.ve-drawer--beautify-scrollbar:hover::-webkit-scrollbar-thumb {
  display: block;
}
.ve-drawer--start {
  top: 0;
  border-inline-end-width: thin;
}
.ve-drawer--end {
  top: 0;
  border-inline-start-width: thin;
}
.ve-drawer--bottom, .ve-drawer--top {
  left: 0;
}
.ve-drawer--temporary {
  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.12), 0px 16px 24px 2px rgba(0, 0, 0, 0.08), 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
}
.ve-drawer__wrapper {
  flex: 0 1 auto;
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}
.ve-drawer--start .ve-drawer__toggler, .ve-drawer--bottom .ve-drawer__toggler {
  transform: translateX(50%) translateY(-50%);
}
.ve-drawer--active.ve-drawer--start .ve-drawer__toggler, .ve-drawer--active.ve-drawer--bottom .ve-drawer__toggler {
  transform: translateX(50%) translateY(-50%) rotate(180deg);
}
.ve-drawer--end .ve-drawer__toggler, .ve-drawer--top .ve-drawer__toggler {
  transform: translateX(-50%) translateY(50%);
}
.ve-drawer--active.ve-drawer--end .ve-drawer__toggler, .ve-drawer--active.ve-drawer--top .ve-drawer__toggler {
  transform: translateX(-50%) translateY(50%) rotate(180deg);
}