// NodeStack component
.node-stack {
  // this element is required to achieve correct stack effect
  // http://stackoverflow.com/questions/3032856/z-index-of-before-or-after-to-be-below-the-element-is-that-possible
  display: inline-block;
  position: relative;
  z-index: 1;
  .stack {
    @node-size: 40px;
    position: relative;
    display: inline-block;
    width: @node-size;
    height: @node-size;
    line-height: @node-size;
    text-align: center;
    border: 1px solid gray;
    background: white;
    margin: 0 18px;
    &:before, &:after {
      display: none;
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      border: inherit;
      background: inherit;
    }
    &:before {
      left: -4px;
      top: -4px;
      z-index: -1;
    }
    &:after {
      left: -7px;
      top: -7px;
      z-index: -2;
    }
    &.single-stack:before { display: block; }
    &.double-stack {
      &:before, &:after { display: block; }
    }
  }
}
