@function glow(
  $inner-color: white,
  $outer-color: hsla(255, 255, 255, 0.05),
  $depth: 5,
  $delta: 20px
) {
  $shadows: ();

  // inner glow
  @for $i from 1 through ceil(($depth / 2)) {
    $shadows: append($shadows, 0 0 (($delta / 2) * $i) $inner-color, comma);
  }

  // outer glow
  @for $i from 1 through $depth {
    $shadows: append($shadows, 0 0 0 ($delta * $i) $outer-color, comma);
  }

  @return $shadows;
}

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: hsl(237, 85%, 13%);
}

ul {
  display: flex;
  list-style-type: none;

  li {
    margin: 3.6em;
    width: 2.4em;
    height: 2.4em;
    line-height: 1.15;

    a {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      text-decoration: none;
      color: hsl(237, 85%, 13%);

      &::before {
        position: absolute;
        content: "";
        top: -25%;
        z-index: -1;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: white;
        border-radius: 50%;
        transition: 0.5s;
      }

      &:hover::before {
        box-shadow: glow();
      }
    }
  }
}
