.burger-menu {
  --main-size: 22px;
  --main-item-size: calc(var(--main-size) / 3);
  --negative: calc(var(--main-size) - (var(--main-size) * 2));
  --item-negative: calc(var(--main-item-size) - (var(--main-item-size) * 2));
  --box-width: var(--main-size);
  --box-height: var(--main-size);
  --item-with: var(--main-size);
  --item-width: var(--main-size);
  --item-width-negative: var(--negative);
  --item-height: calc(var(--main-item-size) / 4);
  --item-center-top: var(--main-item-size);
  --item-top: var(--main-item-size);
  --item-top-negative: var(--item-negative);
  --item-open-before: calc(var(--item-width) / 4.6),
    calc(var(--item-width) / 4.6);
  --item-open-after: calc(var(--item-width) / 5),
    calc(var(--item-width-negative) / 5);
  --item-rotate: 45deg;
  --item-rotate-negative: -45deg;
  --item-scale: 1.26;
  position: relative;
  top: 0;
  right: 0;
  width: var(--box-width);
  height: var(--box-height);
  transition-duration: 0.5s;
  z-index: 1000;
  display: none;
}
@media screen and (max-width: 1024px) {
  .burger-menu {
    display: block;
  }
}

.burger-wrapper {
  padding: 18px 16px 14px;
  border: 2px solid var(--color-brandBlue);
  border-radius: 15px;
  display: none;
}

.burger-menu .icon {
  pointer-events: none;
  transition-duration: 0.5s;
  position: absolute;
  height: var(--item-height);
  width: var(--item-width);
  top: var(--item-top);
  background-color: var(--color-white);
  border-radius: 4px;
}
.burger-menu .icon:before {
  transition-duration: 0.5s;
  position: absolute;
  width: var(--item-width);
  height: var(--item-height);
  background-color: var(--color-white);
  content: '';
  top: var(--item-top-negative);
  border-radius: 4px;
}
.burger-menu .icon:after {
  transition-duration: 0.5s;
  position: absolute;
  width: var(--item-width);
  height: var(--item-height);
  background-color: var(--color-white);
  content: '';
  top: var(--item-top);
  border-radius: 4px;
}
.burger-menu.open .icon {
  transition-duration: 0.5s;
  background: transparent;
}
.burger-menu.open .icon:before {
  transform: rotateZ(var(--item-rotate)) scaleX(var(--item-scale))
    translate(var(--item-open-before));
}
.burger-menu.open .icon:after {
  transform: rotateZ(var(--item-rotate-negative)) scaleX(var(--item-scale))
    translate(var(--item-open-after));
}
.burger-menu:hover {
  cursor: pointer;
}
.burger {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--sidebar-width);
  height: 100dvh;
  background-color: var(--color-g-dark);
  transition: 0.1s transform ease-in-out;
  transform: translateX(100%);
  z-index: 1000;
  display: none;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
.burger.active {
  transform: translateX(0);
}
.burger__list {
  display: flex;
  flex-direction: column;
  font-size: 20px;
  text-align: center;
  color: var(--color-white);
  padding: 0;
  margin: 0;
  gap: 50px;
  flex-grow: 1;
  justify-content: center;
}

.burger__list .nav-item {
  font-weight: 500;
  list-style: none;
}

@media screen and (max-width: 1024px) {
  .burger-wrapper {
    display: block;
  }
  .burger {
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

html.no-scroll {
  overflow: hidden;
}

.wrapper {
  position: relative;
  overflow: hidden;
}
.wrapper::after {
  position: absolute;
  content: '';
  background-color: rgba(0, 0, 0, 1);
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  pointer-events: none;
  transition: opacity 0.3s;
}

html.no-scroll .wrapper::after {
  opacity: 0.3;
  pointer-events: all;
}

.burger.active::after {
  display: none;
}
.burger.active::before {
  display: none;
}