mayank1513/vscode-extension-trello-kanban-board

$tr: 5px;
.toggle {
  height: 28px;
  width: 45px;
  display: inline-flex;
  flex-flow: column nowrap;
  justify-content: space-evenly;
  padding: 0 5px;
  margin: 10px 0;
  cursor: pointer;
  transition: all 0.3s;
  float: left;
  * {
    height: 3px;
    background: var(--fg);
    border-radius: 50%;
    border: 1px solid #5555;
    transition: all 0.3s;
  }
  :first-child,
  :last-child {
    transform: none;
    margin: 0 7px;
  }
  :nth-child(2) {
    opacity: 1;
  }
}

.open {
  transform: rotate(-180deg);
  * {
    background: red;
    &:first-child {
      transform: rotate(45deg) translate($tr, $tr);
    }
    &:last-child {
      transform: rotate(-45deg) translate($tr, -$tr);
    }
    &:nth-child(2) {
      opacity: 0;
    }
  }
}