body {
  background-color: #1f1f1f;
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 768px;
}

.sb-menu {
  width: 128px;
  background-color: #2e2e2e;
  border: 1px solid #464646;
  border-radius: 8px;
}
.sb-menu__toggle {
  --t-duration: 0.6s;
  --t-linecap: butt; /*butt | square | round*/
  --t-timing: ease-in-out;
  --t-stroke: #d6db91;
  stroke-linecap: var(--t-linecap);
}

.sb-menu__toggle path {
  stroke: var(--t-stroke);
}

/*START OF BUTTON ALPHA*/

.sb-menu__toggle--alpha > path {
  fill: none;
  stroke: #d6db91;
  stroke-width: 2;
  stroke-linecap: var(--t-linecap);
  transition-property: stroke-dasharray, stroke-dashoffset;
  transition-duration: var(--t-duration);
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}

.sb-menu__toggle--alpha > #path1 {
  /* stroke: #e7008c; */
  stroke-dasharray: 20 56;
  stroke-dashoffset: 4;
}

.sb-menu__toggle--alpha > #path2 {
  /* stroke: #e79900; */
  stroke-dasharray: 20 56;
  stroke-dashoffset: 4;
}

.sb-menu__toggle--alpha > #path3 {
  /* stroke: #4000e7; */
  stroke-dasharray: 16 16;
  stroke-dashoffset: 32;
}

/*Button Active*/

.is-active .sb-menu__toggle--alpha > #path1 {
  stroke-dashoffset: -33.8;
  stroke-dasharray: 15.6 56;
}

.is-active .sb-menu__toggle--alpha > #path2 {
  stroke-dashoffset: -33.8;
  stroke-dasharray: 15.6 56;
}

.is-active .sb-menu__toggle--alpha > #path3 {
  stroke-dashoffset: 24;
  stroke-dasharray: 0 32;
}

/*END OF BUTTON ALPHA*/

/* START OF BUTTON BRAVO */

.sb-menu__toggle--bravo > path {
  fill: none;
  stroke: #d6db91;
  stroke-width: 2;
  stroke-linecap: var(--t-linecap);
  transition-property: stroke-dasharray, stroke-dashoffset, translate, rotate;
  transition-duration: var(--t-duration);

  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  /* transform-origin: center; */
}

.sb-menu__toggle--bravo > #path1 {
  fill: none;
  /* stroke: #e79900; */
  translate: 0px 5px;
  transition-delay: 0s, 0s, var(--t-duration), 0s;
  transform-origin: center;
}

.sb-menu__toggle--bravo > #path2 {
  fill: none;
  /* stroke: #e79900; */
  translate: 0px -5px;
  transition-delay: 0s, 0s, var(--t-duration), 0s;
  transform-origin: center;
}

.sb-menu__toggle--bravo > #path3 {
  fill: none;
  /* stroke: #4000e7; */
  stroke-dasharray: 16 40;
  stroke-dashoffset: -37.6;
  transform-origin: center;
  transition-delay: 0s, 0s, 0s, 0s;
}

/*Button Bravo Active*/

.is-active .sb-menu__toggle--bravo > #path1 {
  translate: 0px 0px;
  rotate: -45deg;
  transition-delay: 0s, 0s, 0s, var(--t-duration);
}

.is-active .sb-menu__toggle--bravo > #path2 {
  translate: 0px 0px;
  rotate: 45deg;
  transition-delay: 0s, 0s, 0s, var(--t-duration);
}

.is-active .sb-menu__toggle--bravo > #path3 {
  rotate: 45deg;
  transition-delay: 0s, 0s, 0s, var(--t-duration);
}

/* END OF BUTTON BRAVO */

/*START OF BUTTON CHARLIE*/

.sb-menu__toggle--charlie > path {
  fill: none;
  stroke: #d6db91;
  stroke-width: 2;
  stroke-linecap: var(--t-linecap);
  transition-property: stroke-dasharray, stroke-dashoffset;
  transition-duration: var(--t-duration);
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}

.sb-menu__toggle--charlie > #path1 {
  /* stroke: #e7008c; */
  stroke-dasharray: 16 50;
  stroke-dashoffset: -31.4;
}

.sb-menu__toggle--charlie > #path2 {
  /* stroke: #e79900; */
  stroke-dasharray: 16 50;
  stroke-dashoffset: -31.4;
}

.sb-menu__toggle--charlie > #path3 {
  /* stroke: #4000e7; */
  stroke-dasharray: 16 16;
  stroke-dashoffset: -4;
}

/*Button Active*/

.is-active .sb-menu__toggle--charlie > #path1 {
  stroke-dashoffset: 4;
  stroke-dasharray: 16 50;
}

.is-active .sb-menu__toggle--charlie > #path2 {
  stroke-dashoffset: 4;
  stroke-dasharray: 16 50;
}

.is-active .sb-menu__toggle--charlie > #path3 {
  stroke-dashoffset: 2;
  stroke-dasharray: 16 16;
}

/*END OF BUTTON CHARLIE*/

/* START OF BUTTON DELTA */

.sb-menu__toggle--delta > path {
  fill: none;
  stroke: #d6db91;
  stroke-width: 2;
  stroke-linecap: var(--t-linecap);
  transition-property: stroke-dasharray, stroke-dashoffset, translate, rotate;
  transition-duration: var(--t-duration);

  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  /* transform-origin: center; */
}

.sb-menu__toggle--delta > #path1 {
  fill: none;
  /* stroke: #e79900; */
  stroke-dasharray: 16 16;
  stroke-dashoffset: 0;
  translate: 0px -5px;
  transition-delay: 0s, 0s, var(--t-duration), 0s;
  transform-origin: center;
}

.sb-menu__toggle--delta > #path2 {
  fill: none;
  /* stroke: #e79900; */
  stroke-dasharray: 16 84;
  stroke-dashoffset: 0;
  transform-origin: center;
  transition-delay: 0s, 0s, 0s, 0s;
}

.sb-menu__toggle--delta > #path3 {
  fill: none;
  /* stroke: #4000e7; */
  stroke-dasharray: 16 84;
  stroke-dashoffset: 0;
  transform-origin: center;
  transition-delay: 0s, 0s, 0s, 0s;
}

.sb-menu__toggle--delta > #path4 {
  fill: none;
  /* stroke: #00e7c3; */
  stroke-dasharray: 16 16;
  stroke-dashoffset: 0;
  translate: 0px 5px;
  transition-delay: 0s, 0s, var(--t-duration), 0s;
  transform-origin: center;
}

/*Button Delta Active*/

.is-active .sb-menu__toggle--delta > #path1 {
  stroke-dasharray: 12 12;
  stroke-dashoffset: -2;
  translate: 0px 0px;
  rotate: -45deg;
  transition-delay: 0s, 0s, 0s, var(--t-duration);
}

.is-active .sb-menu__toggle--delta > #path2 {
  stroke-dasharray: 64 84;
  stroke-dashoffset: -22;
  transition-delay: 0s, 0s, 0s, 0s;
}

.is-active .sb-menu__toggle--delta > #path3 {
  stroke-dasharray: 64 84;
  stroke-dashoffset: -22;
  transition-delay: 0s, 0s, 0s, 0s;
}

.is-active .sb-menu__toggle--delta > #path4 {
  stroke-dasharray: 12 12;
  stroke-dashoffset: -2;
  translate: 0px 0px;
  rotate: 45deg;
  transition-delay: 0s, 0s, 0s, var(--t-duration);
}
/* END OF BUTTON DELTA*/

/*BUTTON ECHO*/
.sb-menu__toggle--echo {
  stroke-linecap: round;
  transition-property: rotate;
  transition-duration: var(--t-duration);
  transition-timing-function: var(--t-timing);
  transition-delay: calc(var(--t-duration) / 2);
}

.dot-column > path {
  transition-property: stroke-dasharray, translate, stroke, d;
  transition-duration: var(--t-duration);
  transition-timing-function: var(--t-timing);
  transform-origin: center;
  transition-delay: calc(var(--t-duration) / 2), 0s, 0s, 0s;
}

/* ACTIVE STATE */

.is-active .sb-menu__toggle--echo {
  rotate: 45deg;
}

.is-active #right-dot-column > :nth-child(2),
.is-active #left-dot-column > :nth-child(2),
.is-active #middle-dot-column > :not(:nth-child(2)) {
  stroke-dasharray: 6 16;
}

.is-active #left-dot-column > path:nth-child(1) {
  translate: 29% 29%;
}

.is-active #left-dot-column > path:nth-child(3) {
  translate: 29% -29%;
}

.is-active #right-dot-column > path:nth-child(1) {
  translate: -29% 29%;
}

.is-active #right-dot-column > path:nth-child(3) {
  translate: -29% -29%;
}