:root {
  --color: #bc5c5c;
  --dark-color: #bc5c5c;
}

* {
  box-sizing: border-box;
}

.sidebar {
  position: fixed;
  z-index: 100;
  bottom: 30px;
  right: 15px;
}

.hamburgerButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 7px;
  background-color: var(--color);
  transition: all 0.2s ease-in;
  cursor: pointer;
}
.hamburgerButton:hover {
  background-color: var(--dark-color);
}
.hamburgerButton.open {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.hamburgerButton .hamburgerIcon {
  position: relative;
  width: 50%;
}
.hamburgerButton .hamburgerIcon .hamburgerLine {
  height: 3px;
  border-radius: 2px;
  background-color: #fff;
}
.hamburgerButton .hamburgerIcon .hamburgerLine:not(:first-child):not(:last-child) {
  animation-name: hamburger;
  animation-duration: 0.15s;
  animation-delay: 0.15s;
  transform: scaleX(0);
}
.hamburgerButton .hamburgerIcon .hamburgerLine, .hamburgerButton .hamburgerIcon .hamburgerLine:first-child, .hamburgerButton .hamburgerIcon .hamburgerLine:last-child {
  animation-fill-mode: forwards;
}
.hamburgerButton .hamburgerIcon .hamburgerLine:first-child, .hamburgerButton .hamburgerIcon .hamburgerLine:last-child {
  position: absolute;
  width: 100%;
  transform-origin: 50%;
  transition: all 0.1s ease-out;
  animation-duration: 0.3s;
}
.hamburgerButton .hamburgerIcon .hamburgerLine:first-child {
  top: 0;
  animation-name: hamburgerFirst;
  transform: rotate(45deg);
}
.hamburgerButton .hamburgerIcon .hamburgerLine:last-child {
  top: 0;
  animation-name: hamburgerLast;
  transform: rotate(-45deg);
}
.hamburgerButton .hamburgerIcon.hamburgerOpen .hamburgerLine:not(:first-child):not(:last-child) {
  animation-name: hamburgerOpen;
  transform: scaleX(100%);
}
.hamburgerButton .hamburgerIcon.hamburgerOpen .hamburgerLine:first-child {
  top: -10px;
  transform: rotate(0);
  animation-name: hamburgerFirstOpen;
}
.hamburgerButton .hamburgerIcon.hamburgerOpen .hamburgerLine:last-child {
  top: 10px;
  transform: rotate(0);
  animation-name: hamburgerLastOpen;
}

@keyframes hamburger {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes hamburgerOpen {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
@keyframes hamburgerFirst {
  0% {
    top: 0;
    transform: rotate(45deg);
  }
  50% {
    top: 0;
    transform: rotate(0);
  }
  100% {
    top: 10px;
    transform: rotate(0);
  }
}
@keyframes hamburgerLast {
  0% {
    top: 0;
    transform: rotate(-45deg);
  }
  50% {
    top: 0;
    transform: rotate(0);
  }
  100% {
    top: -10px;
    transform: rotate(0);
  }
}
@keyframes hamburgerFirstOpen {
  0% {
    top: 10px;
    transform: rotate(0);
  }
  50% {
    top: 0;
    transform: rotate(0);
  }
  100% {
    top: 0;
    transform: rotate(45deg);
  }
}
@keyframes hamburgerLastOpen {
  0% {
    top: -12px;
    transform: rotate(0);
  }
  /*50% {
      top: 0;
      transform: rotate(0);
  }*/
  100% {
    top: 0;
    transform: rotate(-45deg);
  }
}
.navItem {
  position: absolute;
  bottom: 0;
  left: -240px;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 60px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  visibility: hidden;
  /*&:hover {
      background-color: var(--dark-color);

      .navItem__text {
          right: 120%;
          opacity: 1;
          visibility: visible;
      }
  }*/
  /*.navItem__text {
      color: var(--color);
      position: absolute;
      right: 105%;
      opacity: 0;
      visibility: hidden;
      cursor: default;
      pointer-events: none;
      font-size: 18px;
      font-weight: 500;
      white-space: nowrap;
      transition: all 0.3s ease-in-out;
  }*/
  /*svg {
      color: #fff;
      stroke-width: 2.5;
      width: 26px;
      height: 26px;

      path {
          fill: #fff;
      }
  }*/
}
.navItem:last-child {
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

.navOpen .navItem {
  visibility: visible;
  /*&:nth-child(4) {
      bottom: calc(60px * 4);
      transition-duration: 0.6s;
      z-index: -4;
  }*/
  /*&:last-child {
      bottom: calc(60px * 5);
      transition-duration: 0.75s;
      z-index: -5;
  }*/
}
.navOpen .navItem:first-child {
  bottom: 60px;
  transition-duration: 0.15s;
  z-index: -1;
}
.navOpen .navItem:nth-child(2) {
  bottom: 120px;
  transition-duration: 0.3s;
  z-index: -2;
}
.navOpen .navItem:nth-child(3) {
  bottom: 180px;
  transition-duration: 0.45s;
  z-index: -3;
}