.solution {
  background-color: var(--color-maze-cell-solution);

  &:hover {
    background-color: var(--color-maze-cell-solution-highlight);
  }
}

.top {
  border-top-color: var(--color-maze-border);
}

.right {
  border-right-color: var(--color-maze-border);
}

.bottom {
  border-bottom-color: var(--color-maze-border);
}

.left {
  border-left-color: var(--color-maze-border);
}

.userSELF {
  background: radial-gradient(
                  ellipse 16% 16% at center,
                  var(--color-maze-cell-user) 0,
                  var(--color-maze-cell-user) 100%,
                  #0000 100%
  );

  &.solution {
    background: radial-gradient(
                    ellipse 16% 16% at center,
                    var(--color-maze-cell-user-solution) 0,
                    var(--color-maze-cell-user-solution) 100%,
                    #0000 100%
    );

    &:hover {
      background: radial-gradient(
                      ellipse 33% 33% at center,
                      var(--color-maze-cell-user-solution) 0,
                      var(--color-maze-cell-user-solution) 80%,
                      #0000 100%
      );
    }
  }

  &:hover {
    background: radial-gradient(
                    ellipse 33% 33% at center,
                    var(--color-maze-cell-user) 0,
                    var(--color-maze-cell-user) 80%,
                    #0000 100%
    );
  }
}

.marker {
  display: inline-block;
  position: absolute;

  &:hover {
    background: #fc08;
  }
}

.userUP .marker.UP {
  height: 50%;
  width: 100%;
  background: linear-gradient(
                  90deg,
                  #0000 0,
                  #0000 33%,
                  var(--color-maze-cell-user) 33%,
                  var(--color-maze-cell-user) 66%,
                  #0000 66%,
                  #0000 100%
  );
}

.solution.userUP .marker.UP {
  height: 50%;
  width: 100%;
  background: linear-gradient(
                  90deg,
                  #0000 0,
                  #0000 33%,
                  var(--color-maze-cell-user-solution) 33%,
                  var(--color-maze-cell-user-solution) 66%,
                  #0000 66%,
                  #0000 100%
  );
}

.userRIGHT .marker.RIGHT {
  height: 100%;
  width: 50%;
  left: 50%;
  background: linear-gradient(
                  0deg,
                  #0000 0,
                  #0000 33%,
                  var(--color-maze-cell-user) 33%,
                  var(--color-maze-cell-user) 66%,
                  #0000 66%,
                  #0000 100%
  );
}

.solution.userRIGHT .marker.RIGHT {
  height: 100%;
  width: 50%;
  left: 50%;
  background: linear-gradient(
                  0deg,
                  #0000 0,
                  #0000 33%,
                  var(--color-maze-cell-user-solution) 33%,
                  var(--color-maze-cell-user-solution) 66%,
                  #0000 66%,
                  #0000 100%
  );
}

.userDOWN .marker.DOWN {
  height: 50%;
  width: 100%;
  top: 50%;
  background: linear-gradient(
                  90deg,
                  #0000 0,
                  #0000 33%,
                  var(--color-maze-cell-user) 33%,
                  var(--color-maze-cell-user) 66%,
                  #0000 66%,
                  #0000 100%
  );

}

.solution.userDOWN .marker.DOWN {
  height: 50%;
  width: 100%;
  top: 50%;
  background: linear-gradient(
                  90deg,
                  #0000 0,
                  #0000 33%,
                  var(--color-maze-cell-user-solution) 33%,
                  var(--color-maze-cell-user-solution) 66%,
                  #0000 66%,
                  #0000 100%
  );

}

.userLEFT .marker.LEFT {
  height: 100%;
  width: 50%;
  background: linear-gradient(
                  0deg,
                  #0000 0,
                  #0000 33%,
                  var(--color-maze-cell-user) 33%,
                  var(--color-maze-cell-user) 66%,
                  #0000 66%,
                  #0000 100%
  );
}

.solution.userLEFT .marker.LEFT {
  height: 100%;
  width: 50%;
  background: linear-gradient(
                  0deg,
                  #0000 0,
                  #0000 33%,
                  var(--color-maze-cell-user-solution) 33%,
                  var(--color-maze-cell-user-solution) 66%,
                  #0000 66%,
                  #0000 100%
  );
}