// Thanks to https://3dtransforms.desandro.com/box

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: #f2f2f2;
}

.icon-list {
  display: flex;
  list-style-type: none;
  transform-style: preserve-3d;
  transform: rotateX(50deg) rotateZ(50deg);

  .icon-list__item {
    a {
      .box {
        --box-width: 60px;
        --box-height: 80px;
        --box-depth: 20px;

        width: var(--box-width);
        height: var(--box-height);
        position: relative;
        transform-style: preserve-3d;
        transition: 0.5s;

        .box__face {
          position: absolute;
          font-size: 10px;
          font-weight: bold;
          text-align: center;
        }

        .box__face--front,
        .box__face--back {
          width: var(--box-width);
          height: var(--box-height);
          line-height: var(--box-height);
        }

        .box__face--right,
        .box__face--left {
          width: var(--box-depth);
          height: var(--box-height);
          left: calc((var(--box-width) - var(--box-depth)) / 2);
          line-height: var(--box-height);
        }

        .box__face--top,
        .box__face--bottom {
          width: var(--box-width);
          height: var(--box-depth);
          top: calc((var(--box-height) - var(--box-depth)) / 2);
          line-height: var(--box-depth);
        }

        .box__face--front {
          display: flex;
          justify-content: center;
          align-items: center;
          background: black;
          transition: 0.25s;

          svg {
            fill: hsl(0, 0, 34%);
            transform: rotate(270deg);
            transition: 0.5s;
          }
        }

        .box__face--right {
          background: black;
          transition: 0.25s;
        }

        .box__face--bottom {
          background: black;
          transition: 0.25s;
        }

        .box__face--back {
          box-shadow: -2em 2.5em 0 #e1e1e1;
          transition: 0.25s;
        }

        .box__face--front {
          transform: rotateY(0deg) translateZ(calc(var(--box-depth) / 2));
        }
        .box__face--back {
          transform: rotateY(180deg) translateZ(calc(var(--box-depth) / 2));
        }

        .box__face--right {
          transform: rotateY(90deg) translateZ(calc(var(--box-width) / 2));
        }
        .box__face--left {
          transform: rotateY(-90deg) translateZ(calc(var(--box-width) / 2));
        }

        .box__face--top {
          transform: rotateX(90deg) translateZ(calc(var(--box-height) / 2));
        }
        .box__face--bottom {
          transform: rotateX(-90deg) translateZ(calc(var(--box-height) / 2));
        }
      }
    }

    &:hover {
      @for $i from 1 through 10 {
        &:nth-child(#{$i}) a {
          .box {
            --box-depth: 30px;
            transform: translateZ(24px);

            .box__face--back {
              box-shadow: -1.5em 1.5em 0 #e1e1e1;
            }
          }

          .box__face--front {
            background: #3498db;

            svg {
              fill: #fffcfb;
            }
          }

          .box__face--right {
            background: darken(#3498db, 20%);
          }

          .box__face--bottom {
            background: darken(#3498db, 20%);
          }
        }
      }
    }
  }
}
