.sidebar-opener__icon {
  --width: 6.4vw;
}
@media (min-width: 720px) {
  .sidebar-opener__icon {
    --width: 3.125vw;
  }
}
@media (min-width: 1281px) {
  .sidebar-opener__icon {
    --width: 0vw;
  }
}
@media (min-width: 2400px) {
  .sidebar-opener__icon {
    --width: 0px;
  }
}
.sidebar-opener__icon {
  width: var(--width);
}

.sidebar-closer {
  --top: 4.2666666667vw;
  --right: 4.2666666667vw;
}
@media (min-width: 720px) {
  .sidebar-closer {
    --top: 1.25vw;
  }
}
@media (min-width: 720px) {
  .sidebar-closer {
    --right: 1.25vw;
  }
}
@media (min-width: 1281px) {
  .sidebar-closer {
    --top: 0.8333333333vw;
  }
}
@media (min-width: 1281px) {
  .sidebar-closer {
    --right: 0.8333333333vw;
  }
}
@media (min-width: 2400px) {
  .sidebar-closer {
    --top: 20px;
  }
}
@media (min-width: 2400px) {
  .sidebar-closer {
    --right: 20px;
  }
}
.sidebar-closer {
  position: absolute;
  top: var(--top);
  right: var(--right);
}
.sidebar-closer__icon {
  --width: 6.4vw;
}
@media (min-width: 720px) {
  .sidebar-closer__icon {
    --width: 3.125vw;
  }
}
@media (min-width: 1281px) {
  .sidebar-closer__icon {
    --width: 0vw;
  }
}
@media (min-width: 2400px) {
  .sidebar-closer__icon {
    --width: 0px;
  }
}
.sidebar-closer__icon {
  width: var(--width);
}

.sidebar__overlay {
  display: none;
  z-index: 20;
}
.sidebar__window {
  --width: 100%;
  --auth-buttons-top-padding: 5.3333333333vw;
  --auth-buttons-bottom-padding: 10.6666666667vw;
}
@media (min-width: 720px) {
  .sidebar__window {
    --width: 50%;
  }
}
@media (min-width: 720px) {
  .sidebar__window {
    --auth-buttons-top-padding: 2.109375vw;
  }
}
@media (min-width: 720px) {
  .sidebar__window {
    --auth-buttons-bottom-padding: 3.125vw;
  }
}
@media (min-width: 1281px) {
  .sidebar__window {
    --width: 0;
  }
}
@media (min-width: 1281px) {
  .sidebar__window {
    --auth-buttons-top-padding: 1.40625vw;
  }
}
@media (min-width: 1281px) {
  .sidebar__window {
    --auth-buttons-bottom-padding: 1.40625vw;
  }
}
@media (min-width: 2400px) {
  .sidebar__window {
    --width: 0;
  }
}
@media (min-width: 2400px) {
  .sidebar__window {
    --auth-buttons-top-padding: 33.75px;
  }
}
@media (min-width: 2400px) {
  .sidebar__window {
    --auth-buttons-bottom-padding: 33.75px;
  }
}
.sidebar__window {
  position: fixed;
  top: 0;
  right: 0;
  background-color: var(--color-paper-white);
  height: 100%;
  width: var(--width);
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  z-index: 20;
}
.sidebar__main-logo, .sidebar__closer {
  --translateY: constant(safe-area-inset-top);
  --translateY: env(safe-area-inset-top);
  transform: translateY(var(--translateY));
}
.sidebar__main-logo {
  --top: 4.2666666667vw;
  --left: 4.2666666667vw;
}
@media (min-width: 720px) {
  .sidebar__main-logo {
    --top: 1.25vw;
  }
}
@media (min-width: 720px) {
  .sidebar__main-logo {
    --left: 1.25vw;
  }
}
@media (min-width: 1281px) {
  .sidebar__main-logo {
    --top: 0.8333333333vw;
  }
}
@media (min-width: 1281px) {
  .sidebar__main-logo {
    --left: 0.8333333333vw;
  }
}
@media (min-width: 2400px) {
  .sidebar__main-logo {
    --top: 20px;
  }
}
@media (min-width: 2400px) {
  .sidebar__main-logo {
    --left: 20px;
  }
}
.sidebar__main-logo {
  position: absolute;
  top: var(--top);
  left: var(--left);
}
.sidebar__main-logo-icon {
  --width: 6.4vw;
}
@media (min-width: 720px) {
  .sidebar__main-logo-icon {
    --width: 0vw;
  }
}
@media (min-width: 1281px) {
  .sidebar__main-logo-icon {
    --width: 0vw;
  }
}
@media (min-width: 2400px) {
  .sidebar__main-logo-icon {
    --width: 0px;
  }
}
.sidebar__main-logo-icon {
  width: var(--width);
}
.sidebar__menu {
  --padding-top: 26.6666666667vw;
  --padding-bottom: 53.3333333333vw;
}
@media (min-width: 720px) {
  .sidebar__menu {
    --padding-top: 9.375vw;
  }
}
@media (min-width: 720px) {
  .sidebar__menu {
    --padding-bottom: 15.625vw;
  }
}
@media (min-width: 1281px) {
  .sidebar__menu {
    --padding-top: 0vw;
  }
}
@media (min-width: 1281px) {
  .sidebar__menu {
    --padding-bottom: 10.4166666667vw;
  }
}
@media (min-width: 2400px) {
  .sidebar__menu {
    --padding-top: 0px;
  }
}
@media (min-width: 2400px) {
  .sidebar__menu {
    --padding-bottom: 250px;
  }
}
.sidebar__menu {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding-top: var(--padding-top);
  padding-bottom: var(--padding-bottom);
}
.sidebar__auth-buttons {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: inherit;
  padding: var(--auth-buttons-top-padding) 0 var(--auth-buttons-bottom-padding);
}
.sidebar_open .sidebar__overlay {
  display: block;
}
.sidebar_open .sidebar__window {
  transform: translateX(0);
}