body {
  background-color: #1f1f1f;
}

:root {
  --t-duration: 0.3s;
  --t-linecap: round;
  --t-timing: ease-in-out;
  --t-stroke: #d6db91;
  --t-stroke-width: 2;
  --primary-color: #4000e7;
  --secondary-color: #00e7c3;
  --tertiary-color: #e7008c;
}

.container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 640px;
  margin-inline: auto;
}

.sb-menu {
  width: 128px;
  background-color: #2e2e2e;
  border: 1px solid #464646;
  border-radius: 8px;
}

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

  path {
    stroke: var(--t-stroke);
  }
}

/*START OF BUTTON ALPHA*/

.sb-menu__toggle--alpha {
  > path {
    fill: none;
    stroke: var(--t-stroke);
    stroke-linecap: var(--t-linecap);
    stroke-width: var(--t-stroke-width);
    transition-duration: var(--t-duration);
    transition-property: stroke-dasharray, stroke-dashoffset;
    transition-timing-function: var(--t-timing);
  }

  > #top {
    stroke-dasharray: 20 56;
    stroke-dashoffset: 4;
  }

  > #middle {
    stroke-dasharray: 20 56;
    stroke-dashoffset: 4;
  }

  > #bottom {
    stroke-dasharray: 16 16;
    stroke-dashoffset: 32;
  }
}

/* Active state */

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

  > #middle {
    stroke-dashoffset: -33.8;
    stroke-dasharray: 15.6 56;
  }

  > #bottom {
    stroke-dashoffset: 24;
    stroke-dasharray: 0 32;
  }
}

/*END OF BUTTON ALPHA*/

/* START OF BUTTON BRAVO */

.sb-menu__toggle--bravo {
  > path {
    stroke: var(--t-stroke);
    stroke-linecap: var(--t-linecap);
    stroke-width: var(--t-stroke-width);
    transition-delay: var(--t-duration), 0s;
    transition-duration: var(--t-duration);
    transform-origin: center;
    transition-property: translate, rotate;
    transition-timing-function: var(--t-timing);
  }

  > #top {
    translate: 0px -5px;
  }

  > #middle {
    translate: 0px 0px;
  }

  > #bottom {
    translate: 0px 5px;
  }
}

/*Active state*/

.is-active .sb-menu__toggle--bravo {
  > path {
    transition-delay: 0s, var(--t-duration);
  }

  > #top {
    rotate: -45deg;
    translate: 0px 0px;
  }

  > #middle {
    rotate: 45deg;
  }

  > #bottom {
    rotate: 45deg;
    translate: 0px 0px;
  }
}

/* END OF BUTTON BRAVO */

/*START OF BUTTON CHARLIE*/

.sb-menu__toggle--charlie {
  > path {
    fill: none;
    stroke: var(--t-stroke);
    stroke-linecap: var(--t-linecap);
    stroke-width: var(--t-stroke-width);
    transition-duration: var(--t-duration);
    transition-property: stroke-dasharray, stroke-dashoffset;
    transition-timing-function: var(--t-timing);
  }

  #bottom {
    stroke-dasharray: 16 50;
    stroke-dashoffset: -31.4;
  }

  #middle {
    stroke-dasharray: 16 16;
    stroke-dashoffset: -4;
  }

  #top {
    stroke-dasharray: 16 50;
    stroke-dashoffset: -31.4;
  }
}

/*Active state*/

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

  #middle {
    stroke-dasharray: 16 16;
    stroke-dashoffset: 2;
  }

  > #top {
    stroke-dasharray: 16 50;
    stroke-dashoffset: 4;
  }
}

/*END OF BUTTON CHARLIE*/

/* START OF BUTTON DELTA */

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

.sb-menu__toggle--delta {
  path {
    fill: none;
    transform-origin: center;
    stroke-dashoffset: 0;
  }

  > #top {
    stroke-dasharray: 16 16;
    translate: 0px -5px;
    transition-delay: 0s, 0s, var(--t-duration), 0s;
  }

  #arc1 {
    stroke-dasharray: 16 84;
    transform-origin: center;
    transition-delay: 0s, 0s, 0s, 0s;
  }

  #arc2 {
    stroke-dasharray: 16 84;
    transform-origin: center;
    transition-delay: 0s, 0s, 0s, 0s;
  }

  #bottom {
    stroke-dasharray: 16 16;
    translate: 0px 5px;
    transition-delay: 0s, 0s, var(--t-duration), 0s;
  }
}

/*Button Delta Active*/

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

  > #top {
    rotate: -45deg;
  }

  #arc1 {
    stroke-dasharray: 64 84;
    stroke-dashoffset: -22;
    transition-delay: 0s, 0s, 0s, 0s;
  }

  > #arc2 {
    stroke-dasharray: 64 84;
    stroke-dashoffset: -22;
    transition-delay: 0s, 0s, 0s, 0s;
  }

  > #bottom {
    rotate: 45deg;
  }
}

/* END OF BUTTON DELTA*/

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

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

/* ACTIVE STATE */

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

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

  #left-dot-column > path:nth-child(1) {
    translate: 7px 7px;
  }

  #left-dot-column > path:nth-child(3) {
    translate: 7px -7px;
  }

  #right-dot-column > path:nth-child(1) {
    translate: -7px 7px;
  }

  #right-dot-column > path:nth-child(3) {
    translate: -7px -7px;
  }
}

/* END OF BUTTON ECHO*/

/*BUTTON FOXTROT*/
.sb-menu__toggle--foxtrot {
  stroke-linecap: round;
  /*square*/

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

/* ACTIVE STATE */
.is-active .sb-menu__toggle--foxtrot {
  .dot-column > path {
    transition-delay: var(--t-duration), 0s;
  }

  #left-dot-column {
    > path:nth-child(1) {
      stroke-dasharray: 7 16;
      translate: 7px 7px;
    }

    > path:nth-child(2) {
      translate: 7px 0%;
    }

    > path:nth-child(3) {
      stroke-dasharray: 7 16;
      translate: 7px -7px;
    }
  }

  #middle-dot-column {
    > path:nth-child(1) {
      translate: 0% 7px;
    }

    > path:nth-child(3) {
      translate: 0% -7px;
    }
  }

  #right-dot-column {
    > path:nth-child(1) {
      stroke-dasharray: 7 16;
      translate: -7px 7px;
    }

    > path:nth-child(2) {
      translate: -7px 0%;
    }

    > path:nth-child(3) {
      stroke-dasharray: 7 16;
      translate: -7px -7px;
    }
  }
}

/* END OF BUTTON FOXTROT*/

/*BUTTON GOLF*/
.sb-menu__toggle--golf {
  stroke-linecap: round;
  /*square*/

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

/* ACTIVE STATE */

.is-active .sb-menu__toggle--golf {
  #left-dot-column {
    > path:nth-child(1) {
      stroke-dasharray: 8 16;
      stroke-dashoffset: -3;
    }

    > path:nth-child(2) {
      translate: 7px 0%;
    }

    > path:nth-child(3) {
      stroke-dasharray: 10 16;
      stroke-dashoffset: -3;
    }
  }

  #middle-dot-column {
    > path:nth-child(1) {
      translate: 0% 7px;
    }

    > path:nth-child(3) {
      translate: 0% -7px;
    }
  }

  #right-dot-column {
    > path:nth-child(1) {
      stroke-dasharray: 10 16;
      stroke-dashoffset: -3;
    }

    > path:nth-child(2) {
      translate: -7px 0%;
    }

    > path:nth-child(3) {
      stroke-dasharray: 10 16;
      stroke-dashoffset: -3;
    }
  }
}

/* END OF BUTTON GOLF*/

/*BUTTON HOTEL*/
.sb-menu__toggle--hotel {
  stroke-linecap: round;
  /*square*/

  .dot-column > path {
    transition-delay: 0s;
    transition-duration: var(--t-duration);
    transition-property: translate;
    transition-timing-function: var(--t-timing);
    transform-origin: center;
  }
}

/* ACTIVE STATE */

.is-active .sb-menu__toggle--hotel {
  #left-dot-column {
    > path:nth-child(1) {
      translate: 0% 7px;
    }

    > path:nth-child(3) {
      translate: 0% -7px;
    }
  }

  #middle-dot-column {
    > path:nth-child(1) {
      translate: 0% 7px;
    }

    > path:nth-child(3) {
      translate: 0% -7px;
    }
  }

  #right-dot-column {
    > path:nth-child(1) {
      translate: 0% 7px;
    }

    > path:nth-child(3) {
      translate: 0% -7px;
    }
  }
}

/* END OF BUTTON HOTEL*/

/*BUTTON INDIGO*/
.sb-menu__toggle--indigo > * {
  transition-duration: var(--t-duration);
  transition-property: stroke-dashoffset;
  transition-timing-function: var(--t-timing);
}

/* ACTIVE STATE */

.is-active .sb-menu__toggle--indigo > * {
  stroke-dashoffset: -44;
}

/* END OF BUTTON INDIGO*/

/*BUTTON JULIET*/
.sb-menu__toggle--juliet > * {
  transition-duration: var(--t-duration);
  transition-property: stroke-dashoffset;
  transition-timing-function: var(--t-timing);
}

/* ACTIVE STATE */

.is-active .sb-menu__toggle--juliet > * {
  stroke-dashoffset: -32;
}

/* END OF BUTTON JULIET*/

/*BUTTON KILO*/
.sb-menu__toggle--kilo > * {
  transform-origin: center;
  transition-delay: var(--t-duration), 0s;
  transition-duration: var(--t-duration);
  transition-property: translate, rotate;
  transition-timing-function: var(--t-timing);
}

.sb-menu__toggle--kilo {
  #path1 {
    translate: 0 3px;
  }

  #path2 {
    translate: 0 -3px;
  }
}

/* ACTIVE STATE */

.is-active .sb-menu__toggle--kilo {
  > * {
    transition-delay: 0s, var(--t-duration);
  }

  #path1 {
    translate: 0 0px;
    rotate: 45deg;
  }

  #path2 {
    translate: 0 0px;
    rotate: -45deg;
  }
}

/* END OF BUTTON KILO */

/* BUTTON LIMA */

.sb-menu__toggle--lima {
  transition-property: rotate;
  transition-duration: var(--t-duration);
  transition-timing-function: var(--t-timing);
  transform-origin: center;
  transition-delay: var(--t-duration), 0s;

  > * {
    transition-property: translate, rotate;
    transition-duration: var(--t-duration);
    transition-timing-function: var(--t-timing);
    transform-origin: center;
    transition-delay: var(--t-duration), 0s;
  }
}

.sb-menu__toggle--lima {
  #path1 {
    translate: 0 3px;
  }

  #path2 {
    translate: 0 -3px;
  }
}

/* ACTIVE STATE */

.is-active .sb-menu__toggle--lima {
  rotate: 180deg;

  > * {
    transition-delay: 0s, var(--t-duration);
  }

  #path1 {
    translate: 0 0px;
    rotate: 45deg;
  }

  #path2 {
    translate: 0 0px;
    rotate: -45deg;
  }
}